diff --git a/cypress.config.js b/cypress.config.js index af6def7760..30a76e8c66 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -5,7 +5,7 @@ module.exports = defineConfig({ e2e: { baseUrl: 'http://localhost:5678', video: false, - screenshotOnRunFailure: false, + screenshotOnRunFailure: true, experimentalSessionAndOrigin: true, experimentalInteractiveRunEvents: true, } diff --git a/cypress/e2e/0-smoke.cy.ts b/cypress/e2e/0-smoke.cy.ts index 9304c658ac..6a750b676e 100644 --- a/cypress/e2e/0-smoke.cy.ts +++ b/cypress/e2e/0-smoke.cy.ts @@ -6,7 +6,7 @@ const password = DEFAULT_USER_PASSWORD; const firstName = randFirstName(); const lastName = randLastName(); -describe('Authentication flow', () => { +describe('Authentication', () => { it('should sign user up', () => { cy.signup(username, firstName, lastName, password); }); diff --git a/cypress/e2e/1-workflows.cy.ts b/cypress/e2e/1-workflows.cy.ts index 31fd637fbd..4f4d08cdc8 100644 --- a/cypress/e2e/1-workflows.cy.ts +++ b/cypress/e2e/1-workflows.cy.ts @@ -11,7 +11,7 @@ const lastName = randLastName(); const WorkflowsPage = new WorkflowsPageClass(); const WorkflowPage = new WorkflowPageClass(); -describe('Workflows flow', () => { +describe('Workflows', () => { beforeEach(() => { cy.signup(username, firstName, lastName, password); @@ -26,59 +26,61 @@ describe('Workflows flow', () => { }); it('should create a new workflow using empty state card', () => { - WorkflowsPage.get('newWorkflowButtonCard').should('be.visible'); - WorkflowsPage.get('newWorkflowButtonCard').click(); + WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible'); + WorkflowsPage.getters.newWorkflowButtonCard().click(); cy.createFixtureWorkflow('Test_workflow_1.json', `Empty State Card Workflow ${uuid()}`); - WorkflowPage.get('workflowTags').should('contain.text', 'some-tag-1'); - WorkflowPage.get('workflowTags').should('contain.text', 'some-tag-2'); + WorkflowPage.getters.workflowTags().should('contain.text', 'some-tag-1'); + WorkflowPage.getters.workflowTags().should('contain.text', 'some-tag-2'); }) it('should create a new workflow using add workflow button', () => { - WorkflowsPage.get('newWorkflowButtonCard').should('not.exist'); - WorkflowsPage.get('createWorkflowButton').click(); + WorkflowsPage.getters.newWorkflowButtonCard().should('not.exist'); + WorkflowsPage.getters.createWorkflowButton().click(); cy.createFixtureWorkflow('Test_workflow_2.json', `Add Workflow Button Workflow ${uuid()}`); - WorkflowPage.get('workflowTags').should('contain.text', 'other-tag-1'); - WorkflowPage.get('workflowTags').should('contain.text', 'other-tag-2'); + WorkflowPage.getters.workflowTags().should('contain.text', 'other-tag-1'); + WorkflowPage.getters.workflowTags().should('contain.text', 'other-tag-2'); }) it('should search for a workflow', () => { - WorkflowsPage.get('searchBar').type('Empty State Card Workflow'); + WorkflowsPage.getters.searchBar().type('Empty State Card Workflow'); - WorkflowsPage.get('workflowCards').should('have.length', 1); - WorkflowsPage.get('workflowCard', 'Empty State Card Workflow').should('contain.text', 'Empty State Card Workflow'); + WorkflowsPage.getters.workflowCards().should('have.length', 1); + WorkflowsPage.getters.workflowCard('Empty State Card Workflow').should('contain.text', 'Empty State Card Workflow'); - WorkflowsPage.get('searchBar').clear().type('Add Workflow Button Workflow'); + WorkflowsPage.getters.searchBar().clear().type('Add Workflow Button Workflow'); - WorkflowsPage.get('workflowCards').should('have.length', 1); - WorkflowsPage.get('workflowCard', 'Add Workflow Button Workflow').should('contain.text', 'Add Workflow Button Workflow'); + WorkflowsPage.getters.workflowCards().should('have.length', 1); + WorkflowsPage.getters.workflowCard('Add Workflow Button Workflow').should('contain.text', 'Add Workflow Button Workflow'); + + WorkflowsPage.getters.searchBar().clear().type('Some non-existent workflow'); + WorkflowsPage.getters.workflowCards().should('not.exist'); - WorkflowsPage.get('searchBar').clear().type('Some non-existent workflow'); - WorkflowsPage.get('workflowCards').should('not.exist'); cy.contains('No workflows found').should('be.visible'); }) it('should delete all the workflows', () => { - WorkflowsPage.get('workflowCards').should('have.length', 2); + WorkflowsPage.getters.workflowCards().should('have.length', 2); - WorkflowsPage.get('workflowCards').each(($el) => { + WorkflowsPage.getters.workflowCards().each(($el) => { const workflowName = $el.find('[data-test-id="workflow-card-name"]').text(); - WorkflowsPage.get('workflowCardActions', workflowName).click(); - WorkflowsPage.get('workflowDeleteButton').click(); + WorkflowsPage.getters.workflowCardActions(workflowName).click(); + WorkflowsPage.getters.workflowDeleteButton().click(); + cy.get('button').contains('delete').click(); }) - WorkflowsPage.get('newWorkflowButtonCard').should('be.visible'); - WorkflowsPage.get('newWorkflowTemplateCard').should('be.visible'); + WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible'); + WorkflowsPage.getters.newWorkflowTemplateCard().should('be.visible'); }) it('should contain empty state cards', () => { - WorkflowsPage.get('newWorkflowButtonCard').should('be.visible'); - WorkflowsPage.get('newWorkflowTemplateCard').should('be.visible'); + WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible'); + WorkflowsPage.getters.newWorkflowTemplateCard().should('be.visible'); }); }); diff --git a/cypress/e2e/2-credentials.cy.ts b/cypress/e2e/2-credentials.cy.ts new file mode 100644 index 0000000000..a42ba1ee98 --- /dev/null +++ b/cypress/e2e/2-credentials.cy.ts @@ -0,0 +1,41 @@ +import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from "../constants"; +import { randFirstName, randLastName } from "@ngneat/falso"; +import { CredentialsPage, CredentialsModal } from '../pages'; +// import { v4 as uuid } from 'uuid'; + +const username = DEFAULT_USER_EMAIL; +const password = DEFAULT_USER_PASSWORD; +const firstName = randFirstName(); +const lastName = randLastName(); +const credentialsPage = new CredentialsPage(); +const credentialsModal = new CredentialsModal(); + +describe('Credentials', () => { + beforeEach(() => { + cy.signup(username, firstName, lastName, password); + + cy.on('uncaught:exception', (err, runnable) => { + expect(err.message).to.include('Not logged in'); + + return false; + }) + + cy.signin(username, password); + cy.visit(credentialsPage.url); + }); + + it('should create a new credential using empty state', () => { + credentialsPage.getters.emptyListCreateCredentialButton().click(); + + credentialsModal.getters.newCredentialModal().should('be.visible'); + credentialsModal.getters.newCredentialTypeSelect().should('be.visible'); + credentialsModal.getters.newCredentialTypeOption('Notion API').click(); + + credentialsModal.getters.newCredentialTypeButton().click(); + + credentialsModal.getters.connectionParameter('API Key').type('1234567890'); + + credentialsModal.actions.setName('My awesome Notion account'); + credentialsModal.actions.save(); + }); +}); diff --git a/cypress/pages/base.ts b/cypress/pages/base.ts index dc4855b068..e70bbfa7af 100644 --- a/cypress/pages/base.ts +++ b/cypress/pages/base.ts @@ -1,15 +1,6 @@ import { IE2ETestPage, IE2ETestPageElement } from "../types"; - export class BasePage implements IE2ETestPage { - elements: Record = {}; - get(id: keyof BasePage['elements'], ...args: unknown[]): ReturnType { - const getter = this.elements[id]; - - if (!getter) { - throw new Error(`No element with id "${id}" found. Check your page object definition.`); - } - - return getter(...args); - } + getters: Record = {}; + actions: Record void> = {}; } diff --git a/cypress/pages/credentials.ts b/cypress/pages/credentials.ts new file mode 100644 index 0000000000..920dffdee4 --- /dev/null +++ b/cypress/pages/credentials.ts @@ -0,0 +1,17 @@ +import { BasePage } from "./base"; + +export class CredentialsPage extends BasePage { + url = '/credentials'; + getters = { + emptyListCreateCredentialButton: () => cy.getByTestId('empty-resources-list').find('button'), + createCredentialButton: () => cy.getByTestId('resources-list-add'), + searchBar: () => cy.getByTestId('resources-list-search'), + credentialCards: () => cy.getByTestId('credential-card'), + credentialCard: (credentialName: string) => cy.getByTestId('credential-card') + .contains(credentialName) + .parents('[data-test-id="credential-card"]'), + credentialCardActions: (credentialName: string) => this.getters.credentialCard(credentialName) + .findChildByTestId('credential-card-actions'), + credentialDeleteButton: () => cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete') + }; +} diff --git a/cypress/pages/index.ts b/cypress/pages/index.ts index 07c85e5084..17a3e0efff 100644 --- a/cypress/pages/index.ts +++ b/cypress/pages/index.ts @@ -1,4 +1,6 @@ export * from './base'; +export * from './credentials'; export * from './signin'; export * from './signup'; export * from './workflows'; +export * from './modals'; diff --git a/cypress/pages/modals/credentials-modal.ts b/cypress/pages/modals/credentials-modal.ts new file mode 100644 index 0000000000..d7d45f2262 --- /dev/null +++ b/cypress/pages/modals/credentials-modal.ts @@ -0,0 +1,26 @@ +import { BasePage } from "../base"; + +export class CredentialsModal extends BasePage { + getters = { + newCredentialModal: () => cy.getByTestId('selectCredential-modal', { timeout: 5000 }), + newCredentialTypeSelect: () => cy.getByTestId('new-credential-type-select'), + newCredentialTypeOption: (credentialType: string) => cy.getByTestId('new-credential-type-select-option').contains(credentialType), + newCredentialTypeButton: () => cy.getByTestId('new-credential-type-button'), + connectionParameters: () => cy.getByTestId('credential-connection-parameter'), + connectionParameter: (fieldName: string) => this.getters.connectionParameters().contains(fieldName) + .parents('[data-test-id="credential-connection-parameter"]') + .find('.n8n-input input'), + name: () => cy.getByTestId('credential-name'), + nameInput: () => cy.getByTestId('credential-name').find('input'), + saveButton: () => cy.getByTestId('credential-save-button') + }; + actions = { + setName: (name: string) => { + this.getters.name().click(); + this.getters.nameInput().clear().type(name); + }, + save: () => { + this.getters.saveButton().click(); + } + }; +} diff --git a/cypress/pages/modals/index.ts b/cypress/pages/modals/index.ts new file mode 100644 index 0000000000..aaa7d6d707 --- /dev/null +++ b/cypress/pages/modals/index.ts @@ -0,0 +1 @@ +export * from './credentials-modal'; diff --git a/cypress/pages/signin.ts b/cypress/pages/signin.ts index 5a03179bc5..72874becfc 100644 --- a/cypress/pages/signin.ts +++ b/cypress/pages/signin.ts @@ -2,7 +2,7 @@ import { BasePage } from "./base"; export class SigninPage extends BasePage { url = '/signin'; - elements = { + getters = { form: () => cy.getByTestId('auth-form'), email: () => cy.getByTestId('email'), password: () => cy.getByTestId('password'), diff --git a/cypress/pages/signup.ts b/cypress/pages/signup.ts index 80c343aca9..2a5b61dfdf 100644 --- a/cypress/pages/signup.ts +++ b/cypress/pages/signup.ts @@ -2,7 +2,7 @@ import { BasePage } from "./base"; export class SignupPage extends BasePage { url = '/setup'; - elements = { + getters = { form: () => cy.getByTestId('auth-form'), email: () => cy.getByTestId('email'), firstName: () => cy.getByTestId('firstName'), diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index b0b57b0c61..2a9615cdca 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -2,7 +2,7 @@ import { BasePage } from "./base"; export class WorkflowPage extends BasePage { url = '/workflow/new'; - elements = { + getters = { workflowNameInput: () => cy.getByTestId('workflow-name-input').then($el => cy.wrap($el.find('input'))), workflowImportInput: () => cy.getByTestId('workflow-import-input'), workflowTags: () => cy.getByTestId('workflow-tags'), diff --git a/cypress/pages/workflows.ts b/cypress/pages/workflows.ts index fb75e98049..7e1ce46007 100644 --- a/cypress/pages/workflows.ts +++ b/cypress/pages/workflows.ts @@ -2,7 +2,7 @@ import { BasePage } from "./base"; export class WorkflowsPage extends BasePage { url = '/workflows'; - elements = { + getters = { newWorkflowButtonCard: () => cy.getByTestId('new-workflow-card'), newWorkflowTemplateCard: () => cy.getByTestId('new-workflow-template-card'), searchBar: () => cy.getByTestId('resources-list-search'), @@ -11,13 +11,13 @@ export class WorkflowsPage extends BasePage { workflowCard: (workflowName: string) => cy.getByTestId(`workflow-card`) .contains(workflowName) .parents('[data-test-id="workflow-card"]'), - workflowTags: (workflowName: string) => this.elements.workflowCard(workflowName) + workflowTags: (workflowName: string) => this.getters.workflowCard(workflowName) .findChildByTestId('workflow-card-tags'), - workflowActivator: (workflowName: string) => this.elements.workflowCard(workflowName) + workflowActivator: (workflowName: string) => this.getters.workflowCard(workflowName) .findChildByTestId('workflow-card-activator'), - workflowActivatorStatus: (workflowName: string) => this.elements.workflowActivator(workflowName) + workflowActivatorStatus: (workflowName: string) => this.getters.workflowActivator(workflowName) .findChildByTestId('workflow-activator-status'), - workflowCardActions: (workflowName: string) => this.elements.workflowCard(workflowName) + workflowCardActions: (workflowName: string) => this.getters.workflowCard(workflowName) .findChildByTestId('workflow-card-actions'), workflowDeleteButton: () => cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete') // Not yet implemented diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 61ed3f10a0..820b1bb3e6 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -36,13 +36,13 @@ Cypress.Commands.add('createFixtureWorkflow', (fixtureKey, workflowName) => { const WorkflowPage = new WorkflowPageClass() // We need to force the click because the input is hidden - WorkflowPage.get('workflowImportInput').selectFile(`cypress/fixtures/${fixtureKey}`, { force: true}); - WorkflowPage.get('workflowNameInput').should('be.disabled'); - WorkflowPage.get('workflowNameInput').parent().click() - WorkflowPage.get('workflowNameInput').should('be.enabled'); - WorkflowPage.get('workflowNameInput').clear().type(workflowName).type('{enter}'); + WorkflowPage.getters.workflowImportInput().selectFile(`cypress/fixtures/${fixtureKey}`, { force: true}); + WorkflowPage.getters.workflowNameInput().should('be.disabled'); + WorkflowPage.getters.workflowNameInput().parent().click() + WorkflowPage.getters.workflowNameInput().should('be.enabled'); + WorkflowPage.getters.workflowNameInput().clear().type(workflowName).type('{enter}'); - WorkflowPage.get('saveButton').should('contain', 'Saved'); + WorkflowPage.getters.saveButton().should('contain', 'Saved'); }) Cypress.Commands.add('findChildByTestId', { prevSubject: true }, (subject: Cypress.Chainable>, childTestId) => { @@ -58,10 +58,10 @@ Cypress.Commands.add( cy.session([email, password], () => { cy.visit(signinPage.url); - signinPage.get('form').within(() => { - signinPage.get('email').type(email); - signinPage.get('password').type(password); - signinPage.get('submit').click(); + signinPage.getters.form().within(() => { + signinPage.getters.email().type(email); + signinPage.getters.password().type(password); + signinPage.getters.submit().click(); }); // we should be redirected to /workflows @@ -79,14 +79,14 @@ Cypress.Commands.add('signup', (email, firstName, lastName, password) => { cy.visit(signupPage.url); - signupPage.get('form').within(() => { + signupPage.getters.form().within(() => { cy.url().then((url) => { if (url.endsWith(signupPage.url)) { - signupPage.get('email').type(email); - signupPage.get('firstName').type(firstName); - signupPage.get('lastName').type(lastName); - signupPage.get('password').type(password); - signupPage.get('submit').click(); + signupPage.getters.email().type(email); + signupPage.getters.firstName().type(firstName); + signupPage.getters.lastName().type(lastName); + signupPage.getters.password().type(password); + signupPage.getters.submit().click(); } else { cy.log('User already signed up'); } diff --git a/cypress/types.ts b/cypress/types.ts index 0166f8f903..27b42afa80 100644 --- a/cypress/types.ts +++ b/cypress/types.ts @@ -1,9 +1,10 @@ export type IE2ETestPageElement = (...args: any[]) => | Cypress.Chainable> + | Cypress.Chainable> | Cypress.Chainable>; export interface IE2ETestPage { url?: string; - elements: Record; - get(id: string, ...args: unknown[]): ReturnType; + getters: Record; + actions: Record void>; } diff --git a/package.json b/package.json index 2fb6fde935..1df8bbee3a 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,11 @@ "webhook": "./packages/cli/bin/n8n webhook", "worker": "./packages/cli/bin/n8n worker", "cypress:install": "cypress install", - "test:e2e:db:clean": "rimraf ~/.n8n/cypress.sqlite ~/.n8n/cypress.sqlite.bak", + "test:e2e:db:clean": "rimraf ~/.n8n/cypress.sqlite", "test:e2e:cypress:run": "cypress run", "test:e2e": "pnpm test:e2e:db:clean && cross-env DB_SQLITE_DATABASE=cypress.sqlite N8N_DIAGNOSTICS_ENABLED=false start-server-and-test start http://localhost:5678/favicon.ico test:e2e:cypress:run", "test:e2e:cypress:dev": "cypress open", - "test:e2e:dev": "pnpm test:e2e:db:clean && cross-env DB_SQLITE_DATABASE=cypress.sqlite N8N_DIAGNOSTICS_ENABLED=false start-server-and-test start http://localhost:5678/favicon.ico test:e2e:cypress:dev", + "test:e2e:dev": "pnpm test:e2e:db:clean && cross-env DB_SQLITE_DATABASE=cypress.sqlite N8N_DIAGNOSTICS_ENABLED=false CYPRESS_BASE_URL=http://localhost:8080 start-server-and-test dev http://localhost:8080/favicon.ico test:e2e:cypress:dev", "test:e2e:cypress:ci:smoke": "cypress run --headless --spec \"cypress/e2e/0-smoke.cy.ts\"", "test:e2e:ci:smoke": "pnpm test:e2e:db:clean && cross-env DB_SQLITE_DATABASE=cypress.sqlite N8N_DIAGNOSTICS_ENABLED=false start-server-and-test start http://localhost:5678/favicon.ico test:e2e:cypress:ci:smoke" }, diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue index 782c549582..7543974759 100644 --- a/packages/editor-ui/src/components/CredentialCard.vue +++ b/packages/editor-ui/src/components/CredentialCard.vue @@ -2,6 +2,7 @@