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

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