blsmedia/bot
2
0
Fork 0
Code Activity

feat(integration): ✨ Add webhooks

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-22 18:24:57 +01:00
parent 66f3e7ee7c
commit a58600a38a
78 changed files with 2399 additions and 800 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/builder/cypress/fixtures/typebots/integrations/googleSheets.json
View File

@ -6,6 +6,7 @@
"ownerId": "ckylsz8yy0335z31amvq0jwtt",
"publishedTypebotId": null,
"folderId": null,
"webhooks": { "byId": {}, "allIds": [] },
"blocks": {
"byId": {
"j24wz82YG3rjXMgrmCiTLy": {

1
apps/builder/cypress/fixtures/typebots/integrations/googleSheetsGet.json
View File

@ -6,6 +6,7 @@
"ownerId": "ckyltekzq0533z31ad8opmacz",
"publishedTypebotId": null,
"folderId": null,
"webhooks": { "byId": {}, "allIds": [] },
"blocks": {
"byId": {
"kPupUcEn7TcBGKHUpgK2Q5": {

150
apps/builder/cypress/fixtures/typebots/integrations/webhook.json Normal file
View File

@ -0,0 +1,150 @@
{
"id": "typebot4",
"createdAt": "2022-01-21T07:55:14.727Z",
"updatedAt": "2022-01-21T07:55:14.727Z",
"name": "My typebot",
"ownerId": "user2",
"publishedTypebotId": null,
"folderId": null,
"webhooks": { "byId": {}, "allIds": [] },
"blocks": {
"byId": {
"3kH2sUjVThQDWmqdoKnGk5": {
"id": "3kH2sUjVThQDWmqdoKnGk5",
"title": "Start",
"stepIds": ["oxTsU2C1RX5QHuyY8qjHAM"],
"graphCoordinates": { "x": 42, "y": 13 }
},
"b9mSgu7RKmK4xuiTVQP5Me8": {
"id": "b9mSgu7RKmK4xuiTVQP5Me8",
"title": "Block #3",
"stepIds": ["ssLd2wjExS9qWRur4tZDU1Z"],
"graphCoordinates": { "x": 300, "y": 550 }
},
"bdFW2HHjMoEFmqHtFre9Xi8": {
"id": "bdFW2HHjMoEFmqHtFre9Xi8",
"title": "Block #2",
"stepIds": ["sgkADMK25y9P9V3vjwjBaac", "ssEiEECKSFkA44dGDceHxKw"],
"graphCoordinates": { "x": 121, "y": 227 }
}
},
"allIds": [
"3kH2sUjVThQDWmqdoKnGk5",
"bdFW2HHjMoEFmqHtFre9Xi8",
"b9mSgu7RKmK4xuiTVQP5Me8"
]
},
"steps": {
"byId": {
"oxTsU2C1RX5QHuyY8qjHAM": {
"id": "oxTsU2C1RX5QHuyY8qjHAM",
"type": "start",
"label": "Start",
"edgeId": "25yX9DnQgdafpdAjfAu5Fp",
"blockId": "3kH2sUjVThQDWmqdoKnGk5"
},
"sgkADMK25y9P9V3vjwjBaac": {
"id": "sgkADMK25y9P9V3vjwjBaac",
"type": "text",
"blockId": "bdFW2HHjMoEFmqHtFre9Xi8",
"content": {
"html": "<div>Ready?</div>",
"richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }],
"plainText": "Ready?"
}
},
"ssEiEECKSFkA44dGDceHxKw": {
"id": "ssEiEECKSFkA44dGDceHxKw",
"type": "choice input",
"edgeId": "oxEEtym3NfDf34NCipzjRQ",
"blockId": "bdFW2HHjMoEFmqHtFre9Xi8",
"options": { "itemIds": ["q69Ex7LacPrH9QUMeosRnB"] }
},
"ssLd2wjExS9qWRur4tZDU1Z": {
"id": "ssLd2wjExS9qWRur4tZDU1Z",
"type": "Webhook",
"blockId": "b9mSgu7RKmK4xuiTVQP5Me8",
"options": { "webhookId": "4h4Kk3Q1qGy7gFzpZtWVpU" }
}
},
"allIds": [
"oxTsU2C1RX5QHuyY8qjHAM",
"sgkADMK25y9P9V3vjwjBaac",
"ssEiEECKSFkA44dGDceHxKw",
"ssLd2wjExS9qWRur4tZDU1Z"
]
},
"choiceItems": {
"byId": {
"q69Ex7LacPrH9QUMeosRnB": {
"id": "q69Ex7LacPrH9QUMeosRnB",
"stepId": "ssEiEECKSFkA44dGDceHxKw",
"content": "Go"
}
},
"allIds": ["q69Ex7LacPrH9QUMeosRnB"]
},
"variables": {
"byId": {
"oASkBtoLqkYNqeakcjZH4L": {
"id": "oASkBtoLqkYNqeakcjZH4L",
"name": "secret 1"
},
"4tvkRmf32wiTsXrYoqyhfr": {
"id": "4tvkRmf32wiTsXrYoqyhfr",
"name": "secret 2"
},
"jEg1FvkCU5S5owNAxXFsHL": {
"id": "jEg1FvkCU5S5owNAxXFsHL",
"name": "secret 3"
},
"rEoE1ehHzgx8X3d3UPGDHg": {
"id": "rEoE1ehHzgx8X3d3UPGDHg",
"name": "secret 4"
}
},
"allIds": [
"oASkBtoLqkYNqeakcjZH4L",
"4tvkRmf32wiTsXrYoqyhfr",
"jEg1FvkCU5S5owNAxXFsHL",
"rEoE1ehHzgx8X3d3UPGDHg"
]
},
"webhooks": {
"byId": {
"4h4Kk3Q1qGy7gFzpZtWVpU": { "id": "4h4Kk3Q1qGy7gFzpZtWVpU", "url": "" }
},
"allIds": ["4h4Kk3Q1qGy7gFzpZtWVpU"]
},
"edges": {
"byId": {
"25yX9DnQgdafpdAjfAu5Fp": {
"id": "25yX9DnQgdafpdAjfAu5Fp",
"to": { "blockId": "bdFW2HHjMoEFmqHtFre9Xi8" },
"from": {
"stepId": "oxTsU2C1RX5QHuyY8qjHAM",
"blockId": "3kH2sUjVThQDWmqdoKnGk5"
}
},
"oxEEtym3NfDf34NCipzjRQ": {
"id": "oxEEtym3NfDf34NCipzjRQ",
"to": { "blockId": "b9mSgu7RKmK4xuiTVQP5Me8" },
"from": {
"stepId": "ssEiEECKSFkA44dGDceHxKw",
"blockId": "bdFW2HHjMoEFmqHtFre9Xi8"
}
}
},
"allIds": ["25yX9DnQgdafpdAjfAu5Fp", "oxEEtym3NfDf34NCipzjRQ"]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
},
"settings": {
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null
}

264
apps/builder/cypress/fixtures/typebots/integrations/webhookPreview.json Normal file
View File

@ -0,0 +1,264 @@
{
"id": "typebot4",
"createdAt": "2022-01-21T07:55:14.727Z",
"updatedAt": "2022-01-21T07:55:14.727Z",
"name": "My typebot",
"ownerId": "user2",
"publishedTypebotId": null,
"folderId": null,
"blocks": {
"byId": {
"3kH2sUjVThQDWmqdoKnGk5": {
"id": "3kH2sUjVThQDWmqdoKnGk5",
"title": "Start",
"stepIds": ["oxTsU2C1RX5QHuyY8qjHAM"],
"graphCoordinates": { "x": 42, "y": 13 }
},
"b9mSgu7RKmK4xuiTVQP5Me8": {
"id": "b9mSgu7RKmK4xuiTVQP5Me8",
"title": "Block #3",
"stepIds": ["ssLd2wjExS9qWRur4tZDU1Z"],
"graphCoordinates": { "x": 300, "y": 550 }
},
"bdFW2HHjMoEFmqHtFre9Xi8": {
"id": "bdFW2HHjMoEFmqHtFre9Xi8",
"title": "Block #2",
"stepIds": ["sgkADMK25y9P9V3vjwjBaac", "ssEiEECKSFkA44dGDceHxKw"],
"graphCoordinates": { "x": 121, "y": 227 }
},
"bmz4rc8r19H2C6b7soxzby4": {
"id": "bmz4rc8r19H2C6b7soxzby4",
"title": "Block #4",
"graphCoordinates": { "x": 632, "y": 279 },
"stepIds": ["sgTWsRM1qF2YoYLuGo3Z3pU"]
}
},
"allIds": [
"3kH2sUjVThQDWmqdoKnGk5",
"bdFW2HHjMoEFmqHtFre9Xi8",
"b9mSgu7RKmK4xuiTVQP5Me8",
"bmz4rc8r19H2C6b7soxzby4"
]
},
"steps": {
"byId": {
"oxTsU2C1RX5QHuyY8qjHAM": {
"id": "oxTsU2C1RX5QHuyY8qjHAM",
"type": "start",
"label": "Start",
"edgeId": "25yX9DnQgdafpdAjfAu5Fp",
"blockId": "3kH2sUjVThQDWmqdoKnGk5"
},
"sgkADMK25y9P9V3vjwjBaac": {
"id": "sgkADMK25y9P9V3vjwjBaac",
"type": "text",
"blockId": "bdFW2HHjMoEFmqHtFre9Xi8",
"content": {
"html": "<div>Ready?</div>",
"richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }],
"plainText": "Ready?"
}
},
"ssEiEECKSFkA44dGDceHxKw": {
"id": "ssEiEECKSFkA44dGDceHxKw",
"type": "choice input",
"edgeId": "oxEEtym3NfDf34NCipzjRQ",
"blockId": "bdFW2HHjMoEFmqHtFre9Xi8",
"options": { "itemIds": ["q69Ex7LacPrH9QUMeosRnB"] }
},
"ssLd2wjExS9qWRur4tZDU1Z": {
"id": "ssLd2wjExS9qWRur4tZDU1Z",
"type": "Webhook",
"blockId": "b9mSgu7RKmK4xuiTVQP5Me8",
"options": {
"webhookId": "4h4Kk3Q1qGy7gFzpZtWVpU",
"variablesForTest": {
"byId": {
"6pMn1xm1y3xWVSdJetMAJH": {
"id": "6pMn1xm1y3xWVSdJetMAJH",
"variableId": "oASkBtoLqkYNqeakcjZH4L",
"value": "secret1"
},
"ettAiB75uoFWnJyPS7gn5k": {
"id": "ettAiB75uoFWnJyPS7gn5k",
"variableId": "4tvkRmf32wiTsXrYoqyhfr",
"value": "secret2"
},
"kKpD3Q4YvFQ7CGWiZxJF4s": {
"id": "kKpD3Q4YvFQ7CGWiZxJF4s",
"variableId": "jEg1FvkCU5S5owNAxXFsHL",
"value": "secret3"
},
"xjUC5Q3msXCw9fwqpNdoSx": {
"id": "xjUC5Q3msXCw9fwqpNdoSx",
"variableId": "rEoE1ehHzgx8X3d3UPGDHg",
"value": "secret4"
}
},
"allIds": [
"6pMn1xm1y3xWVSdJetMAJH",
"ettAiB75uoFWnJyPS7gn5k",
"kKpD3Q4YvFQ7CGWiZxJF4s",
"xjUC5Q3msXCw9fwqpNdoSx"
]
},
"responseVariableMapping": {
"byId": {
"o53h6M1sgHJfDTY5C3YEaT": {
"id": "o53h6M1sgHJfDTY5C3YEaT",
"bodyPath": "data[0].name",
"variableId": "4kVx5uf8W1XP6WsfJEvt8v"
}
},
"allIds": ["o53h6M1sgHJfDTY5C3YEaT"]
}
},
"edgeId": "81SjKnxuUgrPmXvvJJihHM"
},
"sgTWsRM1qF2YoYLuGo3Z3pU": {
"id": "sgTWsRM1qF2YoYLuGo3Z3pU",
"blockId": "bmz4rc8r19H2C6b7soxzby4",
"type": "text",
"content": {
"html": "<div>His name is {{Name}}</div>",
"richText": [
{ "type": "p", "children": [{ "text": "His name is {{Name}}" }] }
],
"plainText": "His name is {{Name}}"
}
}
},
"allIds": [
"oxTsU2C1RX5QHuyY8qjHAM",
"sgkADMK25y9P9V3vjwjBaac",
"ssEiEECKSFkA44dGDceHxKw",
"ssLd2wjExS9qWRur4tZDU1Z",
"sgTWsRM1qF2YoYLuGo3Z3pU"
]
},
"choiceItems": {
"byId": {
"q69Ex7LacPrH9QUMeosRnB": {
"id": "q69Ex7LacPrH9QUMeosRnB",
"stepId": "ssEiEECKSFkA44dGDceHxKw",
"content": "Go"
}
},
"allIds": ["q69Ex7LacPrH9QUMeosRnB"]
},
"webhooks": { "byId": {}, "allIds": [] },
"variables": {
"byId": {
"4tvkRmf32wiTsXrYoqyhfr": {
"id": "4tvkRmf32wiTsXrYoqyhfr",
"name": "secret 2",
"value": "secret2"
},
"jEg1FvkCU5S5owNAxXFsHL": {
"id": "jEg1FvkCU5S5owNAxXFsHL",
"name": "secret 3",
"value": "secret3"
},
"oASkBtoLqkYNqeakcjZH4L": {
"id": "oASkBtoLqkYNqeakcjZH4L",
"name": "secret 1",
"value": "secret1"
},
"rEoE1ehHzgx8X3d3UPGDHg": {
"id": "rEoE1ehHzgx8X3d3UPGDHg",
"name": "secret 4",
"value": "secret4"
},
"4kVx5uf8W1XP6WsfJEvt8v": {
"id": "4kVx5uf8W1XP6WsfJEvt8v",
"name": "Name"
}
},
"allIds": [
"oASkBtoLqkYNqeakcjZH4L",
"4tvkRmf32wiTsXrYoqyhfr",
"jEg1FvkCU5S5owNAxXFsHL",
"rEoE1ehHzgx8X3d3UPGDHg",
"4kVx5uf8W1XP6WsfJEvt8v"
]
},
"webhooks": {
"byId": {
"4h4Kk3Q1qGy7gFzpZtWVpU": {
"id": "4h4Kk3Q1qGy7gFzpZtWVpU",
"url": "http://localhost:3000/api/mock/webhook",
"queryParams": {
"byId": {
"hwGB11cA7RaYnaqH7gYyuQ": {
"id": "hwGB11cA7RaYnaqH7gYyuQ",
"key": "firstParam",
"value": "{{secret 1}}"
},
"6ux2FZjhNc4vfqNUDuCkxn": {
"id": "6ux2FZjhNc4vfqNUDuCkxn",
"key": "secondParam",
"value": "{{secret 2}}"
}
},
"allIds": ["hwGB11cA7RaYnaqH7gYyuQ", "6ux2FZjhNc4vfqNUDuCkxn"]
},
"headers": {
"byId": {
"ayTB2cFRKMo6oH9t9KS8SA": {
"id": "ayTB2cFRKMo6oH9t9KS8SA",
"key": "Custom-Typebot",
"value": "{{secret 3}}"
}
},
"allIds": ["ayTB2cFRKMo6oH9t9KS8SA"]
},
"method": "POST",
"body": "{ \"customField\": \"{{secret 4}}\" }"
}
},
"allIds": ["4h4Kk3Q1qGy7gFzpZtWVpU"]
},
"edges": {
"byId": {
"25yX9DnQgdafpdAjfAu5Fp": {
"id": "25yX9DnQgdafpdAjfAu5Fp",
"to": { "blockId": "bdFW2HHjMoEFmqHtFre9Xi8" },
"from": {
"stepId": "oxTsU2C1RX5QHuyY8qjHAM",
"blockId": "3kH2sUjVThQDWmqdoKnGk5"
}
},
"oxEEtym3NfDf34NCipzjRQ": {
"id": "oxEEtym3NfDf34NCipzjRQ",
"to": { "blockId": "b9mSgu7RKmK4xuiTVQP5Me8" },
"from": {
"stepId": "ssEiEECKSFkA44dGDceHxKw",
"blockId": "bdFW2HHjMoEFmqHtFre9Xi8"
}
},
"81SjKnxuUgrPmXvvJJihHM": {
"from": {
"blockId": "b9mSgu7RKmK4xuiTVQP5Me8",
"stepId": "ssLd2wjExS9qWRur4tZDU1Z"
},
"to": { "blockId": "bmz4rc8r19H2C6b7soxzby4" },
"id": "81SjKnxuUgrPmXvvJJihHM"
}
},
"allIds": [
"25yX9DnQgdafpdAjfAu5Fp",
"oxEEtym3NfDf34NCipzjRQ",
"81SjKnxuUgrPmXvvJJihHM"
]
},
"theme": {
"general": {
"font": "Open Sans",
"background": { "type": "None", "content": "#ffffff" }
}
},
"settings": {
"typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
},
"publicId": null
}

BIN
apps/builder/cypress/fixtures/typebots/integrations/webhookPreview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

1
apps/builder/cypress/fixtures/typebots/logic/condition.json
View File

@ -6,6 +6,7 @@
"ownerId": "ckylsbdf60088z31ayqytest6",
"publishedTypebotId": null,
"folderId": null,
"webhooks": { "byId": {}, "allIds": [] },
"blocks": {
"byId": {
"2x83WHtEBkiv7pk7KgqJwZ": {

1
apps/builder/cypress/fixtures/typebots/logic/redirect.json
View File

@ -6,6 +6,7 @@
"ownerId": "ckymkff1100362z1a85juyoa8",
"publishedTypebotId": null,
"folderId": null,
"webhooks": { "byId": {}, "allIds": [] },
"blocks": {
"byId": {
"bsVJfEW7EZrUnAi9s5ev17": {

1
apps/builder/cypress/fixtures/typebots/logic/setVariable.json
View File

@ -6,6 +6,7 @@
"ownerId": "ckylrpsmt0006fn1ah956d0z1",
"publishedTypebotId": null,
"folderId": null,
"webhooks": { "byId": {}, "allIds": [] },
"blocks": {
"byId": {
"kmUzhRFzSKjkaipYNcku9S": {

1
apps/builder/cypress/fixtures/typebots/singleChoiceTarget.json
View File

@ -6,6 +6,7 @@
"ownerId": "ckylsr4fi0220z31apbinpy9d",
"publishedTypebotId": null,
"folderId": null,
"webhooks": { "byId": {}, "allIds": [] },
"blocks": {
"byId": {
"weeBMMXxNKwEonMfDX8Z5k": {

1
apps/builder/cypress/plugins/utils.ts
View File

@ -75,6 +75,7 @@ export const parseTestTypebot = ({
publishedTypebotId: null,
updatedAt: new Date(),
variables: { byId: {}, allIds: [] },
webhooks: { byId: {}, allIds: [] },
edges: {
byId: {
edge1: {

2
apps/builder/cypress/tests/bubbles/image.ts
View File

@ -52,7 +52,7 @@ describe('Image bubbles', () => {
.should('include', unsplashImageSrc)
})
it.only('should import giphy gifs correctly', () => {
it('should import giphy gifs correctly', () => {
cy.findByRole('button', { name: 'Giphy' }).click()
cy.findAllByRole('img').eq(3).click()
cy.findAllByRole('img')

96
apps/builder/cypress/tests/integrations/webhooks.ts Normal file
View File

@ -0,0 +1,96 @@
import { preventUserFromRefreshing } from 'cypress/plugins/utils'
import { getIframeBody } from 'cypress/support'
describe('Webhook step', () => {
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
afterEach(() => {
cy.window().then((win) => {
win.removeEventListener('beforeunload', preventUserFromRefreshing)
})
})
describe('Configuration', () => {
it('configuration is working', () => {
cy.loadTypebotFixtureInDatabase('typebots/integrations/webhook.json')
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findByText('Configure...').click()
cy.findByRole('button', { name: 'GET' }).click()
cy.findByRole('menuitem', { name: 'POST' }).click({ force: true })
cy.findByPlaceholderText('Your Webhook URL...').type(
`${Cypress.env('SITE_NAME')}/api/mock/webhook`
)
cy.findByRole('button', { name: 'Query params' }).click()
cy.findByRole('textbox', { name: 'Key:' }).type('firstParam')
cy.findByRole('textbox', { name: 'Value:' }).type('{{secret 1}}', {
parseSpecialCharSequences: false,
})
cy.findByRole('button', { name: 'Add a param' }).click()
cy.findAllByRole('textbox', { name: 'Key:' }).last().type('secondParam')
cy.findAllByRole('textbox', { name: 'Value:' })
.last()
.type('{{secret 2}}', {
parseSpecialCharSequences: false,
})
cy.findByRole('button', { name: 'Headers' }).click()
cy.findAllByRole('textbox', { name: 'Key:' })
.last()
.type('Custom-Typebot')
cy.findAllByRole('textbox', { name: 'Value:' })
.last()
.type('{{secret 3}}', {
parseSpecialCharSequences: false,
})
cy.findByRole('button', { name: 'Body' }).click()
cy.findByTestId('code-editor').type('{ "customField": "{{secret 4}}" }', {
parseSpecialCharSequences: false,
waitForAnimations: false,
})
cy.findByRole('button', { name: 'Variable values for test' }).click()
addTestVariable('secret 1', 'secret1')
cy.findByRole('button', { name: 'Add an entry' }).click()
addTestVariable('secret 2', 'secret2')
cy.findByRole('button', { name: 'Add an entry' }).click()
addTestVariable('secret 3', 'secret3')
cy.findByRole('button', { name: 'Add an entry' }).click()
addTestVariable('secret 4', 'secret4')
cy.findByRole('button', { name: 'Test the request' }).click()
cy.findAllByTestId('code-editor')
.should('have.length', 2)
.last()
.should('contain.text', '"statusCode": 200')
cy.findByRole('button', { name: 'Save in variables' }).click()
cy.findByPlaceholderText('Select the data').click()
cy.findByRole('menuitem', { name: 'data[0].name' }).click()
})
})
describe('Preview', () => {
it('should correctly send the request', () => {
cy.loadTypebotFixtureInDatabase(
'typebots/integrations/webhookPreview.json'
)
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot4/edit')
cy.findByRole('button', { name: 'Preview' }).click()
getIframeBody().findByRole('button', { name: 'Go' }).click()
getIframeBody().findByText('His name is John').should('exist')
})
})
})
const addTestVariable = (name: string, value: string) => {
cy.findAllByTestId('variables-input').last().click()
cy.findByRole('menuitem', { name }).click()
cy.findAllByRole('textbox', { name: 'Test value:' }).last().type(value)
}

6
apps/builder/cypress/tests/logic/condition.ts
View File

@ -22,14 +22,14 @@ describe('Condition step', () => {
cy.findByTestId('variables-input').click()
cy.findByRole('menuitem', { name: 'Age' }).click()
cy.findByRole('button', { name: 'Equal to' }).click()
cy.findByRole('button', { name: 'Select an operator' }).click()
cy.findByRole('menuitem', { name: 'Greater than' }).click()
cy.findByPlaceholderText('Type a value...').type('80')
cy.findByRole('button', { name: 'Add a comparison' }).click()
cy.findAllByTestId('variables-input').last().click()
cy.findByRole('menuitem', { name: 'Age' }).click()
cy.findByRole('button', { name: 'Equal to' }).click()
cy.findByRole('button', { name: 'Select an operator' }).click()
cy.findByRole('menuitem', { name: 'Less than' }).click()
cy.findAllByPlaceholderText('Type a value...').last().type('100')
@ -37,7 +37,7 @@ describe('Condition step', () => {
cy.findByTestId('variables-input').click()
cy.findByRole('menuitem', { name: 'Age' }).click()
cy.findByRole('button', { name: 'Equal to' }).click()
cy.findByRole('button', { name: 'Select an operator' }).click()
cy.findByRole('menuitem', { name: 'Greater than' }).click()
cy.findByPlaceholderText('Type a value...').type('20')