test(editor): Fix flaky e2e tests (#4779)

* test(editor): Fix default-owner and credentials saving e2e specs

* test(editor): fix webhook node test

* test(editor): add cy command for browser permissions

* test(editor): add cy command for reading clipboard

* Fix 3-default-owner spec

* Resolve review comments

* Merge spec

* Fix http node and expression editor modal specs

* Add optional param to credentials modal saving action to wait for the test endpoint

* Improve sidebar items clicking and increase credentials saving timeout

* Rename http e2e spec to fix ordering

* Fix pasting and copying of nodes e2e spec

* Make sure to only access error.cause if it exists

* Wait longer for the keyboard press

* Make sure to focus the body when typing

* Try type delay

* Use meta key based on the running platform

* Fix flaky workflowTagElements getter

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>
This commit is contained in:
OlegIvaniv 2022-12-07 18:16:38 +01:00 committed by GitHub
parent 6d5ea0634c
commit 1c36c37a12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 109 additions and 92 deletions

View file

@ -24,92 +24,86 @@ const firstName = randFirstName();
const lastName = randLastName(); const lastName = randLastName();
describe('Default owner', () => { describe('Default owner', () => {
// todo test should redirect to setup if have not skipped before(() => {
beforeEach(() => {
cy.resetAll(); cy.resetAll();
}); });
beforeEach(() => {
cy.visit('/');
})
it('should be able to use n8n without user management and setup UM', () => { it('should skip owner setup', () => {
describe('should skip owner setup', () => { cy.skipSetup();
cy.skipSetup(); });
cy.url().should('include', workflowsPage.url);
});
describe('should be able to create workflows', () => { it('should be able to create workflows', () => {
workflowsPage.getters.newWorkflowButtonCard().should('be.visible'); workflowsPage.getters.newWorkflowButtonCard().should('be.visible');
workflowsPage.getters.newWorkflowButtonCard().click(); workflowsPage.getters.newWorkflowButtonCard().click();
cy.createFixtureWorkflow('Test_workflow_1.json', `Test workflow`); cy.createFixtureWorkflow('Test_workflow_1.json', `Test workflow`);
// reload page, ensure owner still has access // reload page, ensure owner still has access
cy.reload(); cy.reload();
workflowPage.getters.workflowNameInput().should('contain.value', 'Test workflow'); workflowPage.getters.workflowNameInput().should('contain.value', 'Test workflow');
}); });
describe('should be able to add new credentials', () => { it('should be able to add new credentials', () => {
cy.visit(credentialsPage.url); cy.visit(credentialsPage.url);
credentialsPage.getters.emptyListCreateCredentialButton().click(); credentialsPage.getters.emptyListCreateCredentialButton().click();
credentialsModal.getters.newCredentialModal().should('be.visible'); credentialsModal.getters.newCredentialModal().should('be.visible');
credentialsModal.getters.newCredentialTypeSelect().should('be.visible'); credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
credentialsModal.getters.newCredentialTypeOption('Notion API').click(); credentialsModal.getters.newCredentialTypeOption('Notion API').click();
credentialsModal.getters.newCredentialTypeButton().click(); credentialsModal.getters.newCredentialTypeButton().click();
credentialsModal.getters.connectionParameter('API Key').type('1234567890'); credentialsModal.getters.connectionParameter('API Key').type('1234567890');
credentialsModal.actions.setName('My awesome Notion account'); credentialsModal.actions.setName('My awesome Notion account');
credentialsModal.actions.save(); credentialsModal.actions.save();
credentialsModal.actions.close(); credentialsModal.actions.close();
credentialsModal.getters.newCredentialModal().should('not.exist'); credentialsModal.getters.newCredentialModal().should('not.exist');
credentialsModal.getters.editCredentialModal().should('not.exist'); credentialsModal.getters.editCredentialModal().should('not.exist');
credentialsPage.getters.credentialCards().should('have.length', 1); credentialsPage.getters.credentialCards().should('have.length', 1);
}); });
describe('should be able to setup UM from settings', () => { it('should be able to setup UM from settings', () => {
mainSidebar.getters.settings().should('be.visible'); mainSidebar.getters.settings().should('be.visible');
mainSidebar.actions.goToSettings(); mainSidebar.actions.goToSettings();
cy.url().should('include', settingsUsersPage.url); cy.url().should('include', settingsUsersPage.url);
settingsUsersPage.actions.goToOwnerSetup(); settingsUsersPage.actions.goToOwnerSetup();
cy.url().should('include', signupPage.url); cy.url().should('include', signupPage.url);
}); });
describe('should be able to setup instance and migrate workflows and credentials', () => { it('should be able to setup instance and migrate workflows and credentials', () => {
cy.setup({ email, firstName, lastName, password }); cy.setup({ email, firstName, lastName, password });
messageBox.getters.content().should('contain.text', '1 existing workflow and 1 credential') messageBox.getters.content().should('contain.text', '1 existing workflow and 1 credential')
messageBox.actions.confirm(); messageBox.actions.confirm();
}); cy.url().should('include', settingsUsersPage.url);
settingsSidebar.actions.back();
describe('should be redirected back to users page after setup', () => { cy.url().should('include', workflowsPage.url);
cy.url().should('include', settingsUsersPage.url);
// todo test users and that owner exist
});
describe('can click back to workflows and have migrated workflow after setup', () => { workflowsPage.getters.workflowCards().should('have.length', 1);
settingsSidebar.actions.back(); });
cy.url().should('include', workflowsPage.url); it('can click back to main menu and have migrated credential after setup', () => {
cy.signin({ email, password });
cy.visit(workflowsPage.url);
workflowsPage.getters.workflowCards().should('have.length', 1); mainSidebar.actions.goToCredentials();
});
describe('can click back to main menu and have migrated credential after setup', () => { cy.url().should('include', credentialsPage.url);
mainSidebar.actions.goToCredentials();
cy.url().should('include', workflowsPage.url); credentialsPage.getters.credentialCards().should('have.length', 1);
workflowsPage.getters.workflowCards().should('have.length', 1);
});
}); });
}); });

View file

@ -29,19 +29,9 @@ describe('NDV', () => {
ndv.getters.nodeExecuteButton().first().click(); ndv.getters.nodeExecuteButton().first().click();
ndv.getters.copyInput().click(); ndv.getters.copyInput().click();
cy.wrap(Cypress.automation('remote:debugger:protocol', { cy.grantBrowserPermissions('clipboardReadWrite', 'clipboardSanitizedWrite');
command: 'Browser.grantPermissions',
params: {
permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
origin: window.location.origin,
},
}));
cy.window().its('navigator.permissions') cy.readClipboard().then(url => {
.invoke('query', {name: 'clipboard-read'})
.its('state').should('equal', 'granted');
cy.window().its('navigator.clipboard').invoke('readText').then(url => {
cy.request({ cy.request({
method: 'GET', method: 'GET',
url, url,

View file

@ -90,10 +90,16 @@ describe('Workflow Actions', () => {
}); });
it('should copy nodes', () => { it('should copy nodes', () => {
const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_NODE); WorkflowPage.actions.addNodeToCanvas(CODE_NODE);
cy.get('body').type('{meta}', { release: false }).type('a'); WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
cy.get('body').type('{meta}', { release: false }).type('c');
cy.get("#node-creator").should('not.exist');
cy.get('body').type(metaKey, { delay: 500, release: false }).type('a');
cy.get('.jtk-drag-selected').should('have.length', 2);
cy.get('body').type(metaKey, { delay: 500, release: false }).type('c');
WorkflowPage.getters.successToast().should('exist'); WorkflowPage.getters.successToast().should('exist');
}); });

View file

@ -15,10 +15,10 @@ describe('HTTP Request node', () => {
WorkflowPage.actions.addInitialNodeToCanvas('Manual Trigger'); WorkflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
WorkflowPage.actions.addNodeToCanvas('HTTP Request'); WorkflowPage.actions.addNodeToCanvas('HTTP Request');
WorkflowPage.actions.openNodeNdv('HTTP Request'); WorkflowPage.actions.openNodeNdv('HTTP Request');
WorkflowPage.actions.typeIntoParameterInput('url', 'https://google.com'); WorkflowPage.actions.typeIntoParameterInput('url', 'https://catfact.ninja/fact');
WorkflowPage.actions.executeNodeFromNdv(); WorkflowPage.actions.executeNodeFromNdv();
WorkflowPage.getters.ndvOutputPanel().contains('<!doctype html>'); WorkflowPage.getters.ndvOutputPanel().contains('fact');
}); });
}); });

View file

@ -4,7 +4,7 @@ const WorkflowPage = new WorkflowPageClass();
describe('Expression editor modal', () => { describe('Expression editor modal', () => {
before(() => { before(() => {
cy.task('db:reset'); cy.task('reset');
cy.skipSetup(); cy.skipSetup();
}); });

View file

@ -13,7 +13,8 @@ export class CredentialsModal extends BasePage {
.find('.n8n-input input'), .find('.n8n-input input'),
name: () => cy.getByTestId('credential-name'), name: () => cy.getByTestId('credential-name'),
nameInput: () => cy.getByTestId('credential-name').find('input'), nameInput: () => cy.getByTestId('credential-name').find('input'),
saveButton: () => cy.getByTestId('credential-save-button'), // Saving of the credentials takes a while on the CI so we need to increase the timeout
saveButton: () => cy.getByTestId('credential-save-button', { timeout: 5000 }),
closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(), closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(),
}; };
actions = { actions = {
@ -21,12 +22,16 @@ export class CredentialsModal extends BasePage {
this.getters.name().click(); this.getters.name().click();
this.getters.nameInput().clear().type(name); this.getters.nameInput().clear().type(name);
}, },
save: () => { save: (test = false) => {
cy.intercept('POST', '/rest/credentials').as('saveCredential'); cy.intercept('POST', '/rest/credentials').as('saveCredential');
cy.intercept('POST', '/rest/credentials/test').as('testCredential'); if(test) {
cy.intercept('POST', '/rest/credentials/test').as('testCredential');
}
this.getters.saveButton().click(); this.getters.saveButton().click();
cy.wait('@saveCredential').wait('@testCredential');
cy.wait('@saveCredential');
if(test) cy.wait('@testCredential')
this.getters.saveButton().should('contain.text', 'Saved'); this.getters.saveButton().should('contain.text', 'Saved');
}, },
close: () => { close: () => {

View file

@ -2,14 +2,24 @@ import { BasePage } from "../base";
export class MainSidebar extends BasePage { export class MainSidebar extends BasePage {
getters = { getters = {
settings: () => cy.getByTestId('menu-item-settings', { timeout: 5000 }), menuItem: (menuLabel: string) => cy.getByTestId('menu-item').filter(`:contains("${menuLabel}")`),
templates: () => cy.getByTestId('menu-item-templates'), settings: () => this.getters.menuItem('Settings'),
workflows: () => cy.getByTestId('menu-item-workflows'), templates: () => this.getters.menuItem('Templates'),
credentials: () => cy.getByTestId('menu-item-credentials'), workflows: () => this.getters.menuItem('Workflows'),
executions: () => cy.getByTestId('menu-item-executions'), credentials: () => this.getters.menuItem('Credentials'),
executions: () => this.getters.menuItem('Executions'),
}; };
actions = { actions = {
goToSettings: () => this.getters.settings().click(), goToSettings: () => {
goToCredentials: () => this.getters.credentials().click(), this.getters.settings().should('be.visible');
// We must wait before ElementUI menu is done with its animations
cy.get('[data-old-overflow]').should('not.exist');
this.getters.settings().click();
},
goToCredentials: () => {
this.getters.credentials().should('be.visible');
cy.get('[data-old-overflow]').should('not.exist');
this.getters.credentials().click()
},
}; };
} }

View file

@ -9,7 +9,7 @@ export class WorkflowPage extends BasePage {
workflowTags: () => cy.getByTestId('workflow-tags'), workflowTags: () => cy.getByTestId('workflow-tags'),
workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'), workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'),
workflowTagsInput: () => this.getters.workflowTagsContainer().then(($el) => cy.wrap($el.find('input').first())), workflowTagsInput: () => this.getters.workflowTagsContainer().then(($el) => cy.wrap($el.find('input').first())),
workflowTagElements: () => this.getters.workflowTagsContainer().find('span.tags').children(), workflowTagElements: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span'),
workflowTagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'), workflowTagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'),
newTagLink: () => cy.getByTestId('new-tag-link'), newTagLink: () => cy.getByTestId('new-tag-link'),
saveButton: () => cy.getByTestId('workflow-save-button'), saveButton: () => cy.getByTestId('workflow-save-button'),
@ -22,7 +22,6 @@ export class WorkflowPage extends BasePage {
cy.getByTestId(`parameter-input-${parameterName}`), cy.getByTestId(`parameter-input-${parameterName}`),
ndvOutputPanel: () => cy.getByTestId('output-panel'), ndvOutputPanel: () => cy.getByTestId('output-panel'),
ndvRunDataPaneHeader: () => cy.getByTestId('run-data-pane-header'), ndvRunDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
successToast: () => cy.get('.el-notification__title'), successToast: () => cy.get('.el-notification__title'),
activatorSwitch: () => cy.getByTestId('workflow-activate-switch'), activatorSwitch: () => cy.getByTestId('workflow-activate-switch'),
workflowMenu: () => cy.getByTestId('workflow-menu'), workflowMenu: () => cy.getByTestId('workflow-menu'),
@ -34,7 +33,6 @@ export class WorkflowPage extends BasePage {
nodeViewRoot: () => cy.getByTestId('node-view-root'), nodeViewRoot: () => cy.getByTestId('node-view-root'),
copyPasteInput: () => cy.getByTestId('hidden-copy-paste'), copyPasteInput: () => cy.getByTestId('hidden-copy-paste'),
canvasNodes: () => cy.getByTestId('canvas-node'),
}; };
actions = { actions = {
visit: () => { visit: () => {

View file

@ -129,6 +129,18 @@ Cypress.Commands.add('setupOwner', (payload) => {
cy.task('setup-owner', payload); cy.task('setup-owner', payload);
}); });
Cypress.Commands.add('grantBrowserPermissions', (...permissions: string[]) => {
if(Cypress.isBrowser('chrome')) {
cy.wrap(Cypress.automation('remote:debugger:protocol', {
command: 'Browser.grantPermissions',
params: {
permissions,
origin: window.location.origin,
},
}));
}
});
Cypress.Commands.add('readClipboard', () => cy.window().its('navigator.clipboard').invoke('readText'));
Cypress.Commands.add('paste', { prevSubject: true }, (selector, pastePayload) => { Cypress.Commands.add('paste', { prevSubject: true }, (selector, pastePayload) => {
// https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event // https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
cy.wrap(selector).then($destination => { cy.wrap(selector).then($destination => {

View file

@ -24,6 +24,8 @@ declare global {
setupOwner(payload: SetupPayload): void; setupOwner(payload: SetupPayload): void;
skipSetup(): void; skipSetup(): void;
resetAll(): void; resetAll(): void;
grantBrowserPermissions(...permissions: string[]): void;
readClipboard(): Chainable<string>;
paste(pastePayload: string): void, paste(pastePayload: string): void,
} }
} }

View file

@ -695,7 +695,7 @@ export class CredentialsHelper extends ICredentialsHelper {
`Received HTTP status code: ${errorResponseData.statusCode}`, `Received HTTP status code: ${errorResponseData.statusCode}`,
}; };
} }
} else if (error.cause.code) { } else if (error.cause?.code) {
return { return {
status: 'Error', status: 'Error',
message: error.cause.code, message: error.cause.code,

View file

@ -30,7 +30,7 @@
[$style.disableActiveStyle]: !isItemActive(child), [$style.disableActiveStyle]: !isItemActive(child),
[$style.active]: isItemActive(child), [$style.active]: isItemActive(child),
}" }"
:data-test-id="`menu-item-${child.id}`" data-test-id="menu-item"
:index="child.id" :index="child.id"
@click="onItemClick(child)" @click="onItemClick(child)"
> >
@ -54,7 +54,7 @@
[$style.active]: isItemActive(item), [$style.active]: isItemActive(item),
[$style.compact]: compact, [$style.compact]: compact,
}" }"
:data-test-id="`menu-item-${item.id}`" data-test-id="menu-item"
:index="item.id" :index="item.id"
@click="onItemClick(item)" @click="onItemClick(item)"
> >