test: Migrate Cypress webhook tests to Playwright (#19491)

This commit is contained in:
Declan Carroll
2025-09-15 10:40:19 +01:00
committed by GitHub
parent 87d79c9efb
commit b5adcc8f9f
4 changed files with 274 additions and 262 deletions

View File

@@ -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');
};

View File

@@ -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');
}
}

View File

@@ -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<void> {
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);
}
}

View File

@@ -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<void> {
await n8n.canvas.addNode('Edit Fields (Set)');
const editFieldsNode = new EditFieldsNode(n8n.page);
await editFieldsNode.setSingleFieldValue('MyValue', 'number', 1234);
await n8n.ndv.close();
}