diff --git a/cypress/e2e/16-webhook-node.cy.ts b/cypress/e2e/16-webhook-node.cy.ts deleted file mode 100644 index e0892a4a0b..0000000000 --- a/cypress/e2e/16-webhook-node.cy.ts +++ /dev/null @@ -1,262 +0,0 @@ -import { nanoid } from 'nanoid'; - -import { simpleWebhookCall, waitForWebhook } from '../composables/webhooks'; -import { BACKEND_BASE_URL, EDIT_FIELDS_SET_NODE_NAME } from '../constants'; -import { WorkflowPage, NDV, CredentialsModal } from '../pages'; -import { cowBase64 } from '../support/binaryTestFiles'; -import { getVisibleSelect } from '../utils'; - -const workflowPage = new WorkflowPage(); -const ndv = new NDV(); -const credentialsModal = new CredentialsModal(); - -describe('Webhook Trigger node', () => { - beforeEach(() => { - workflowPage.actions.visit(); - }); - - it('should listen for a GET request', () => { - simpleWebhookCall({ method: 'GET', webhookPath: nanoid(), executeNow: true }); - }); - - it('should listen for a POST request', () => { - simpleWebhookCall({ method: 'POST', webhookPath: nanoid(), executeNow: true }); - }); - - it('should listen for a DELETE request', () => { - simpleWebhookCall({ method: 'DELETE', webhookPath: nanoid(), executeNow: true }); - }); - it('should listen for a HEAD request', () => { - simpleWebhookCall({ method: 'HEAD', webhookPath: nanoid(), executeNow: true }); - }); - it('should listen for a PATCH request', () => { - simpleWebhookCall({ method: 'PATCH', webhookPath: nanoid(), executeNow: true }); - }); - it('should listen for a PUT request', () => { - simpleWebhookCall({ method: 'PUT', webhookPath: nanoid(), executeNow: true }); - }); - - it('should listen for a GET request and respond with Respond to Webhook node', () => { - const webhookPath = nanoid(); - simpleWebhookCall({ - method: 'GET', - webhookPath, - executeNow: false, - respondWith: 'Respond to Webhook', - }); - - ndv.getters.backToCanvas().click(); - - addEditFields(); - - ndv.getters.backToCanvas().click({ force: true }); - - workflowPage.actions.addNodeToCanvas('Respond to Webhook'); - - workflowPage.actions.executeWorkflow(); - cy.wait(waitForWebhook); - - cy.request<{ MyValue: number }>('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then( - (response) => { - expect(response.status).to.eq(200); - expect(response.body.MyValue).to.eq(1234); - }, - ); - }); - - it('should listen for a GET request and respond custom status code 201', () => { - const webhookPath = nanoid(); - simpleWebhookCall({ - method: 'GET', - webhookPath, - executeNow: false, - responseCode: 201, - }); - - ndv.actions.execute(); - cy.wait(waitForWebhook); - - cy.request('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then((response) => { - expect(response.status).to.eq(201); - }); - }); - - it('should listen for a GET request and respond with last node', () => { - const webhookPath = nanoid(); - simpleWebhookCall({ - method: 'GET', - webhookPath, - executeNow: false, - respondWith: 'Last Node', - }); - ndv.getters.backToCanvas().click(); - - addEditFields(); - - ndv.getters.backToCanvas().click({ force: true }); - - workflowPage.actions.executeWorkflow(); - cy.wait(waitForWebhook); - - cy.request<{ MyValue: number }>('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then( - (response) => { - expect(response.status).to.eq(200); - expect(response.body.MyValue).to.eq(1234); - }, - ); - }); - - it('should listen for a GET request and respond with last node binary data', () => { - const webhookPath = nanoid(); - simpleWebhookCall({ - method: 'GET', - webhookPath, - executeNow: false, - respondWith: 'Last Node', - responseData: 'First Entry Binary', - }); - ndv.getters.backToCanvas().click(); - - workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME); - workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME); - ndv.getters.assignmentCollectionAdd('assignments').click(); - ndv.getters.assignmentName('assignments').type('data').find('input').blur(); - ndv.getters.assignmentType('assignments').click(); - ndv.getters.assignmentValue('assignments').paste(cowBase64); - - ndv.getters.backToCanvas().click(); - - workflowPage.actions.addNodeToCanvas('Convert to File'); - workflowPage.actions.zoomToFit(); - - workflowPage.actions.openNode('Convert to File'); - cy.getByTestId('parameter-input-operation').click(); - getVisibleSelect().find('.option-headline').contains('Convert to JSON').click(); - cy.getByTestId('parameter-input-mode').click(); - getVisibleSelect().find('.option-headline').contains('Each Item to Separate File').click(); - ndv.getters.backToCanvas().click(); - - workflowPage.actions.executeWorkflow(); - cy.wait(waitForWebhook); - - cy.request<{ data: unknown }>('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then( - (response) => { - expect(response.status).to.eq(200); - expect(Object.keys(response.body).includes('data')).to.be.true; - }, - ); - }); - - it('should listen for a GET request and respond with an empty body', () => { - const webhookPath = nanoid(); - simpleWebhookCall({ - method: 'GET', - webhookPath, - executeNow: false, - respondWith: 'Last Node', - responseData: 'No Response Body', - }); - ndv.actions.execute(); - cy.wait(waitForWebhook); - cy.request<{ MyValue: unknown }>('GET', `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`).then( - (response) => { - expect(response.status).to.eq(200); - expect(response.body.MyValue).to.be.undefined; - }, - ); - }); - - it('should listen for a GET request with Basic Authentication', () => { - const webhookPath = nanoid(); - simpleWebhookCall({ - method: 'GET', - webhookPath, - executeNow: false, - authentication: 'Basic Auth', - }); - // add credentials - workflowPage.getters.nodeCredentialsSelect().click(); - workflowPage.getters.nodeCredentialsCreateOption().click(); - credentialsModal.getters.credentialsEditModal().should('be.visible'); - credentialsModal.actions.fillCredentialsForm(); - - ndv.actions.execute(); - cy.wait(waitForWebhook); - cy.request({ - method: 'GET', - url: `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`, - auth: { - user: 'username', - pass: 'password', - }, - failOnStatusCode: false, - }) - .then((response) => { - expect(response.status).to.eq(403); - }) - .then(() => { - cy.request({ - method: 'GET', - url: `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`, - auth: { - user: 'test', - pass: 'test', - }, - failOnStatusCode: true, - }).then((response) => { - expect(response.status).to.eq(200); - }); - }); - }); - - it('should listen for a GET request with Header Authentication', () => { - const webhookPath = nanoid(); - simpleWebhookCall({ - method: 'GET', - webhookPath, - executeNow: false, - authentication: 'Header Auth', - }); - // add credentials - workflowPage.getters.nodeCredentialsSelect().click(); - workflowPage.getters.nodeCredentialsCreateOption().click(); - credentialsModal.getters.credentialsEditModal().should('be.visible'); - credentialsModal.actions.fillCredentialsForm(); - - ndv.actions.execute(); - cy.wait(waitForWebhook); - cy.request({ - method: 'GET', - url: `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`, - headers: { - test: 'wrong', - }, - failOnStatusCode: false, - }) - .then((response) => { - expect(response.status).to.eq(403); - }) - .then(() => { - cy.request({ - method: 'GET', - url: `${BACKEND_BASE_URL}/webhook-test/${webhookPath}`, - headers: { - test: 'test', - }, - failOnStatusCode: true, - }).then((response) => { - expect(response.status).to.eq(200); - }); - }); - }); -}); - -const addEditFields = () => { - workflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME); - workflowPage.actions.openNode(EDIT_FIELDS_SET_NODE_NAME); - ndv.getters.assignmentCollectionAdd('assignments').click(); - ndv.getters.assignmentName('assignments').type('MyValue').find('input').blur(); - ndv.getters.assignmentType('assignments').click(); - getVisibleSelect().find('li').contains('Number').click(); - ndv.getters.assignmentValue('assignments').type('1234'); -}; diff --git a/packages/testing/playwright/pages/CanvasPage.ts b/packages/testing/playwright/pages/CanvasPage.ts index 2c14ddf668..2a7c2f62e4 100644 --- a/packages/testing/playwright/pages/CanvasPage.ts +++ b/packages/testing/playwright/pages/CanvasPage.ts @@ -648,4 +648,8 @@ export class CanvasPage extends BasePage { async openExecutions() { await this.page.getByTestId('radio-button-executions').click(); } + + waitingForTriggerEvent() { + return this.getExecuteWorkflowButton().getByText('Waiting for trigger event'); + } } diff --git a/packages/testing/playwright/pages/NodeDetailsViewPage.ts b/packages/testing/playwright/pages/NodeDetailsViewPage.ts index cffa14c3d5..f20f4dc486 100644 --- a/packages/testing/playwright/pages/NodeDetailsViewPage.ts +++ b/packages/testing/playwright/pages/NodeDetailsViewPage.ts @@ -473,6 +473,10 @@ export class NodeDetailsViewPage extends BasePage { return this.getNodeParameters().locator('input[placeholder*="Add Value"]'); } + getCollectionAddOptionSelect() { + return this.getNodeParameters().getByTestId('collection-add-option-select'); + } + getParameterSwitch(parameterName: string) { return this.getParameterInput(parameterName).locator('.el-switch'); } @@ -846,4 +850,31 @@ export class NodeDetailsViewPage extends BasePage { getCredentialLabel(credentialType: string) { return this.page.getByText(credentialType); } + getWebhookTestEvent() { + return this.page.getByText('Listening for test event'); + } + + getAddOptionDropdown() { + return this.page.getByRole('combobox', { name: 'Add option' }); + } + + /** + * Adds an optional parameter from a collection dropdown + * @param optionDisplayName - The display name of the option to add (e.g., 'Response Code') + * @param parameterName - The parameter name to set after adding (e.g., 'responseCode') + * @param parameterValue - The value to set for the parameter + */ + async setOptionalParameter( + optionDisplayName: string, + parameterName: string, + parameterValue: string | boolean, + ): Promise { + await this.getAddOptionDropdown().click(); + + // Step 2: Select the option by display name + await this.page.getByRole('option', { name: optionDisplayName }).click(); + + // Step 3: Set the parameter value + await this.setupHelper.setParameter(parameterName, parameterValue); + } } diff --git a/packages/testing/playwright/tests/ui/16-webhook-node.spec.ts b/packages/testing/playwright/tests/ui/16-webhook-node.spec.ts new file mode 100644 index 0000000000..93aba09b0d --- /dev/null +++ b/packages/testing/playwright/tests/ui/16-webhook-node.spec.ts @@ -0,0 +1,239 @@ +import { nanoid } from 'nanoid'; + +import { test, expect } from '../../fixtures/base'; +import type { n8nPage } from '../../pages/n8nPage'; +import { EditFieldsNode } from '../../pages/nodes/EditFieldsNode'; + +const cowBase64 = + 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k='; + +test.describe('Webhook Trigger node', () => { + test.describe.configure({ mode: 'serial' }); + test.beforeEach(async ({ n8n }) => { + await n8n.start.fromBlankCanvas(); + }); + + const HTTP_METHODS = ['GET', 'POST', 'DELETE', 'HEAD', 'PATCH', 'PUT']; + for (const httpMethod of HTTP_METHODS) { + test(`should listen for a ${httpMethod} request`, async ({ n8n }) => { + const webhookPath = nanoid(); + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ httpMethod, path: webhookPath }); + await n8n.ndv.execute(); + await expect(n8n.ndv.getWebhookTestEvent()).toBeVisible(); + const response = await n8n.api.request.fetch(`/webhook-test/${webhookPath}`, { + method: httpMethod, + }); + expect(response.ok()).toBe(true); + }); + } + + test('should listen for a GET request and respond with Respond to Webhook node', async ({ + n8n, + api, + }) => { + const webhookPath = nanoid(); + + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ + httpMethod: 'GET', + path: webhookPath, + responseMode: "Using 'Respond to Webhook' Node", + }); + await n8n.ndv.close(); + await addEditFieldsNode(n8n); + await n8n.canvas.addNode('Respond to Webhook', { closeNDV: true }); + + await n8n.canvas.clickExecuteWorkflowButton(); + await expect(n8n.canvas.waitingForTriggerEvent()).toBeVisible(); + const response = await api.request.get(`/webhook-test/${webhookPath}`); + expect(response.ok()).toBe(true); + + const responseData = await response.json(); + expect(responseData.MyValue).toBe(1234); + }); + + test('should listen for a GET request and respond with custom status code 201', async ({ + n8n, + api, + }) => { + const webhookPath = nanoid(); + + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ httpMethod: 'GET', path: webhookPath }); + + await n8n.ndv.setOptionalParameter('Response Code', 'responseCode', '201'); + await n8n.ndv.execute(); + await expect(n8n.ndv.getWebhookTestEvent()).toBeVisible(); + + const response = await api.request.get(`/webhook-test/${webhookPath}`); + expect(response.status()).toBe(201); + }); + + test('should listen for a GET request and respond with last node', async ({ n8n, api }) => { + const webhookPath = nanoid(); + + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ + httpMethod: 'GET', + path: webhookPath, + responseMode: 'When Last Node Finishes', + }); + await n8n.ndv.close(); + + await addEditFieldsNode(n8n); + + await n8n.canvas.clickExecuteWorkflowButton(); + + await expect(n8n.canvas.waitingForTriggerEvent()).toBeVisible(); + + const response = await api.request.get(`/webhook-test/${webhookPath}`); + expect(response.ok()).toBe(true); + + const responseData = await response.json(); + expect(responseData.MyValue).toBe(1234); + }); + + test('should listen for a GET request and respond with last node binary data', async ({ + n8n, + api, + }) => { + const webhookPath = nanoid(); + + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ + httpMethod: 'GET', + path: webhookPath, + responseMode: 'When Last Node Finishes', + }); + await n8n.ndv.selectOptionInParameterDropdown('responseData', 'First Entry Binary'); + await n8n.ndv.close(); + + await n8n.canvas.addNode('Edit Fields (Set)'); + const editFieldsNode = new EditFieldsNode(n8n.page); + await editFieldsNode.setSingleFieldValue('data', 'string', cowBase64); + await n8n.ndv.close(); + + await n8n.canvas.addNode('Convert to File', { action: 'Convert to JSON' }); + await n8n.ndv.selectOptionInParameterDropdown('mode', 'Each Item to Separate File'); + await n8n.ndv.close(); + + await n8n.canvas.clickExecuteWorkflowButton(); + + await expect(n8n.canvas.waitingForTriggerEvent()).toBeVisible(); + + const response = await api.request.get(`/webhook-test/${webhookPath}`); + expect(response.ok()).toBe(true); + + const responseData = await response.json(); + expect('data' in responseData).toBe(true); + }); + + test('should listen for a GET request and respond with an empty body', async ({ n8n, api }) => { + const webhookPath = nanoid(); + + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ + httpMethod: 'GET', + path: webhookPath, + responseMode: 'When Last Node Finishes', + }); + await n8n.ndv.selectOptionInParameterDropdown('responseData', 'No Response Body'); + await n8n.ndv.execute(); + await expect(n8n.ndv.getWebhookTestEvent()).toBeVisible(); + + const response = await api.request.get(`/webhook-test/${webhookPath}`); + expect(response.ok()).toBe(true); + + const responseData = await response.text(); + expect(responseData).toBe(''); + }); + + test('should listen for a GET request with Basic Authentication', async ({ n8n, api }) => { + const webhookPath = nanoid(); + const credentialName = `test-${nanoid()}`; + const user = `test-${nanoid()}`; + const password = `test-${nanoid()}`; + await n8n.credentialsComposer.createFromApi({ + type: 'httpBasicAuth', + name: credentialName, + data: { + user, + password, + }, + }); + + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ + httpMethod: 'GET', + path: webhookPath, + authentication: 'Basic Auth', + }); + + await n8n.ndv.execute(); + await expect(n8n.ndv.getWebhookTestEvent()).toBeVisible(); + + const failResponse = await api.request.get(`/webhook-test/${webhookPath}`, { + headers: { + Authorization: 'Basic ' + Buffer.from('wrong:wrong').toString('base64'), + }, + }); + expect(failResponse.status()).toBe(403); + + const successResponse = await api.request.get(`/webhook-test/${webhookPath}`, { + headers: { + Authorization: 'Basic ' + Buffer.from(`${user}:${password}`).toString('base64'), + }, + }); + expect(successResponse.ok()).toBe(true); + }); + + test('should listen for a GET request with Header Authentication', async ({ n8n, api }) => { + const webhookPath = nanoid(); + const credentialName = `test-${nanoid()}`; + const name = `test-${nanoid()}`; + const value = `test-${nanoid()}`; + await n8n.credentialsComposer.createFromApi({ + type: 'httpHeaderAuth', + name: credentialName, + data: { + name, + value, + }, + }); + + await n8n.canvas.addNode('Webhook'); + await n8n.ndv.setupHelper.webhook({ + httpMethod: 'GET', + path: webhookPath, + authentication: 'Header Auth', + }); + + await n8n.ndv.execute(); + await expect(n8n.ndv.getWebhookTestEvent()).toBeVisible(); + + const failResponse = await api.request.get(`/webhook-test/${webhookPath}`, { + headers: { + test: 'wrong', + }, + }); + + expect(failResponse.status()).toBe(403); + + const successResponse = await api.request.get(`/webhook-test/${webhookPath}`, { + headers: { + [name]: value, + }, + }); + expect(successResponse.ok()).toBe(true); + }); +}); + +async function addEditFieldsNode(n8n: n8nPage): Promise { + await n8n.canvas.addNode('Edit Fields (Set)'); + + const editFieldsNode = new EditFieldsNode(n8n.page); + await editFieldsNode.setSingleFieldValue('MyValue', 'number', 1234); + + await n8n.ndv.close(); +}