groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduce playwright (#1194)

Browse Source 
* feat: introduce playwright

* test: migrate apps folder to playwright (#1201)

* test: rewrite connections tests with playwright (#1203)

* test: rewrite executions tests with playwright (#1207)

* test: rewrite flow editor tests with playwright (#1212)

* test(flow-editor): rewrite tests using serial mode (#1218)

* test: update custom connection creation paths

* test: move login logic to page fixture

* test: remove cypress tests and deps

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>
This commit is contained in:
Rıdvan Akca
2023-08-18 00:31:38 +03:00
committed by GitHub
parent 590780a539
commit dace794167
29 changed files with 709 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/e2e-tests/.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
node_modules/
/test-results/
/playwright-report/
/playwright/.cache/
/output

17
packages/e2e-tests/cypress.config.js
View File

@@ -1,17 +0,0 @@
const { defineConfig } = require('cypress');
const TO_BE_PROVIDED = 'HAS_TO_BE_PROVIDED_IN_cypress.env.json';
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:3001',
env: {
login_email: 'user@automatisch.io',
login_password: 'sample',
deepl_auth_key: TO_BE_PROVIDED,
},
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
viewportWidth: 1280,
viewportHeight: 768,
},
});

52
packages/e2e-tests/cypress/e2e/apps/list-apps.js
View File

@@ -1,52 +0,0 @@
/// <reference types="cypress" />
describe('Apps page', () => {
before(() => {
cy.login();
cy.og('apps-page-drawer-link').click();
});
after(() => {
cy.logout();
});
it('displays applications', () => {
cy.og('apps-loader').should('not.exist');
cy.og('app-row').should('have.length.least', 1);
cy.ss('Applications');
});
context('can add connection', () => {
before(() => {
cy
.og('add-connection-button')
.click({ force: true });
});
it('lists applications', () => {
cy.og('app-list-item').should('have.length.above', 1);
});
it('searches an application', () => {
cy.og('search-for-app-text-field').type('DeepL');
cy.og('app-list-item').should('have.length', 1);
});
it('goes to app page to create a connection', () => {
cy.og('app-list-item').first().click();
cy.location('pathname').should('equal', '/app/deepl/connections/add');
cy.og('add-app-connection-dialog').should('be.visible');
});
it('closes the dialog on backdrop click', () => {
cy.clickOutside();
cy.location('pathname').should('equal', '/app/deepl/connections');
cy.og('add-app-connection-dialog').should('not.exist');
});
});
});

48
packages/e2e-tests/cypress/e2e/connections/create-connection.js
View File

@@ -1,48 +0,0 @@
/// <reference types="cypress" />
describe('Connections page', () => {
before(() => {
cy.login();
cy.og('apps-page-drawer-link').click();
cy.visit('/app/deepl/connections');
});
after(() => {
cy.logout();
});
it('shows connections if any', () => {
cy.og('apps-loader').should('not.exist');
cy.ss('DeepL connections before creating a connection');
});
context('can add connection', () => {
it('has a button to open add connection dialog', () => {
cy.scrollTo('top', { ensureScrollable: false });
cy
.og('add-connection-button')
.should('be.visible');
});
it('add connection button takes user to add connection page', () => {
cy.og('add-connection-button').click();
cy.location('pathname').should('equal', '/app/deepl/connections/add');
});
it('shows add connection dialog to create a new connection', () => {
cy.get('input[name="screenName"]').type('e2e-test connection!');
cy.get('input[name="authenticationKey"]').type(Cypress.env('deepl_auth_key'));
cy.og('create-connection-button').click();
cy.og('create-connection-button').should('not.exist');
cy.ss('DeepL connections after creating a connection');
});
});
});

32
packages/e2e-tests/cypress/e2e/executions/display-execution.js
View File

@@ -1,32 +0,0 @@
/// <reference types="cypress" />
describe('Execution page', () => {
before(() => {
cy.login();
cy.og('executions-page-drawer-link').click();
cy.og('execution-row').first().click({ force: true });
cy.location('pathname').should('match', /^\/executions\//);
});
after(() => {
cy.logout();
});
it('displays data in by default', () => {
cy.og('execution-step').should('have.length', 2);
cy.ss('Execution - data in');
});
it('displays data out', () => {
cy.og('data-out-tab').click({ multiple: true });
cy.ss('Execution - data out');
});
it('does not display error', () => {
cy.og('error-tab').should('not.exist');
});
});

20
packages/e2e-tests/cypress/e2e/executions/list-executions.js
View File

@@ -1,20 +0,0 @@
/// <reference types="cypress" />
describe('Executions page', () => {
before(() => {
cy.login();
cy.og('executions-page-drawer-link').click();
});
after(() => {
cy.logout();
});
it('displays executions', () => {
cy.og('executions-loader').should('not.exist');
cy.og('execution-row').should('exist');
cy.ss('Executions');
});
});

217
packages/e2e-tests/cypress/e2e/flow-editor/create-flow.js
View File

@@ -1,217 +0,0 @@
/// <reference types="cypress" />
describe('Flow editor page', () => {
before(() => {
cy.login();
});
after(() => {
cy.logout();
});
it('create flow', () => {
cy.og('create-flow-button').click({ force: true });
});
it('has two steps by default', () => {
cy.og('flow-step').should('have.length', 2);
});
context('edit flow', () => {
context('arrange Scheduler trigger', () => {
context('choose app and event substep', () => {
it('choose application', () => {
cy.og('choose-app-autocomplete').click();
cy.get('li[role="option"]:contains("Scheduler")').click();
});
it('choose an event', () => {
cy.og('choose-event-autocomplete').should('be.visible').click();
cy.get('li[role="option"]:contains("Every hour")').click();
});
it('continue to next step', () => {
cy.og('flow-substep-continue-button').click();
});
it('collapses the substep', () => {
cy.og('choose-app-autocomplete').should('not.be.visible');
cy.og('choose-event-autocomplete').should('not.be.visible');
});
});
context('set up a trigger', () => {
it('choose "yes" in "trigger on weekends?"', () => {
cy.og('parameters.triggersOnWeekend-autocomplete')
.should('be.visible')
.click();
cy.get('li[role="option"]:contains("Yes")').click();
});
it('continue to next step', () => {
cy.og('flow-substep-continue-button').click();
});
it('collapses the substep', () => {
cy.og('parameters.triggersOnWeekend-autocomplete').should(
'not.exist'
);
});
});
context('test trigger', () => {
it('show sample output', () => {
cy.og('flow-test-substep-output').should('not.exist');
cy.og('flow-substep-continue-button').click();
cy.og('flow-test-substep-output').should('be.visible');
cy.ss('Scheduler trigger test output');
cy.og('flow-substep-continue-button').click();
});
});
});
context('arrange DeepL action', () => {
context('choose app and event substep', () => {
it('choose application', () => {
cy.og('choose-app-autocomplete').click();
cy.get('li[role="option"]:contains("DeepL")').click();
});
it('choose an event', () => {
cy.og('choose-event-autocomplete').should('be.visible').click();
cy.get(
'li[role="option"]:contains("Translate Text")'
).click();
});
it('continue to next step', () => {
cy.og('flow-substep-continue-button').click();
});
it('collapses the substep', () => {
cy.og('choose-app-autocomplete').should('not.be.visible');
cy.og('choose-event-autocomplete').should('not.be.visible');
});
});
context('choose connection', () => {
it('choose connection', () => {
cy.og('choose-connection-autocomplete').click();
cy.get('li[role="option"]').first().click();
});
it('continue to next step', () => {
cy.og('flow-substep-continue-button').click();
});
it('collapses the substep', () => {
cy.og('choose-connection-autocomplete').should('not.be.visible');
});
});
context('set up action', () => {
it('arrange text', () => {
cy.og('power-input', ' [contenteditable]')
.click()
.type(
`Hello from e2e tests! Here is the first suggested variable's value; `
);
cy.og('power-input-suggestion-group')
.first()
.og('power-input-suggestion-item')
.first()
.click();
cy.clickOutside();
cy.ss('DeepL action text');
});
it('set target language', () => {
cy.og('parameters.targetLanguage-autocomplete').click();
cy.get(
'li[role="option"]:contains("Turkish")'
).first().click();
});
it('continue to next step', () => {
cy.og('flow-substep-continue-button').click();
});
it('collapses the substep', () => {
cy.og('power-input', ' [contenteditable]').should('not.exist');
});
});
context('test trigger', () => {
it('show sample output', () => {
cy.og('flow-test-substep-output').should('not.exist');
cy.og('flow-substep-continue-button').click();
cy.og('flow-test-substep-output').should('be.visible');
cy.ss('DeepL action test output');
cy.og('flow-substep-continue-button').click();
});
});
});
});
context('publish and unpublish', () => {
it('publish flow', () => {
cy.og('unpublish-flow-button').should('not.exist');
cy.og('publish-flow-button').should('be.visible').click();
cy.og('publish-flow-button').should('not.exist');
});
it('shows read-only sticky snackbar', () => {
cy.og('flow-cannot-edit-info-snackbar').should('be.visible');
cy.ss('Published flow');
});
it('unpublish from snackbar', () => {
cy.og('unpublish-flow-from-snackbar').click();
cy.og('flow-cannot-edit-info-snackbar').should('not.exist');
});
it('publish once again', () => {
cy.og('publish-flow-button').should('be.visible').click();
cy.og('publish-flow-button').should('not.exist');
});
it('unpublish from layout top bar', () => {
cy.og('unpublish-flow-button').should('be.visible').click();
cy.og('unpublish-flow-button').should('not.exist');
cy.ss('Unpublished flow');
});
});
context('in layout', () => {
it('can go back to flows page', () => {
cy.og('editor-go-back-button').click();
cy.location('pathname').should('equal', '/flows');
});
});
});

44
packages/e2e-tests/cypress/support/commands.js
View File

@@ -1,44 +0,0 @@
Cypress.Commands.add(
'og',
{ prevSubject: 'optional' },
(subject, selector, suffix = '') => {
if (subject) {
return cy.wrap(subject).get(`[data-test="${selector}"]${suffix}`);
}
return cy.get(`[data-test="${selector}"]${suffix}`);
}
);
Cypress.Commands.add('login', () => {
cy.visit('/login');
cy.og('email-text-field').type(Cypress.env('login_email'));
cy.og('password-text-field').type(Cypress.env('login_password'));
cy.intercept('/graphql').as('graphqlCalls');
cy.intercept('https://notifications.automatisch.io/notifications.json').as(
'notificationsCall'
);
cy.og('login-button').click();
cy.wait(['@graphqlCalls', '@notificationsCall']);
});
Cypress.Commands.add('logout', () => {
cy.og('profile-menu-button').click();
cy.og('logout-item').click();
});
Cypress.Commands.add('ss', (name, opts = {}) => {
return cy.screenshot(name, {
overwrite: true,
capture: 'viewport',
...opts,
});
});
Cypress.Commands.add('clickOutside', () => {
return cy.get('body').click(0, 0);
});

20
packages/e2e-tests/cypress/support/e2e.js
View File

@@ -1,20 +0,0 @@
// ***********************************************************
// This example support/e2e.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')

12
packages/e2e-tests/fixtures/applications-page.js Normal file
View File

@@ -0,0 +1,12 @@
const path = require('node:path');
const { BasePage } = require('./base-page');
export class ApplicationsPage extends BasePage {
async screenshot(options = {}) {
const { path: plainPath, ...restOptions } = options;
const computedPath = path.join('applications', plainPath);
return await super.screenshot({ path: computedPath, ...restOptions });
}
}

22
packages/e2e-tests/fixtures/base-page.js Normal file
View File

@@ -0,0 +1,22 @@
const path = require('node:path');
export class BasePage {
/**
* @param {import('@playwright/test').Page} page
*/
constructor(page) {
this.page = page;
}
async clickAway() {
await this.page.locator('body').click({ position: { x: 0, y: 0 } });
}
async screenshot(options = {}) {
const { path: plainPath, ...restOptions } = options;
const computedPath = path.join('output/screenshots', plainPath);
return await this.page.screenshot({ path: computedPath, ...restOptions });
}
}

16
packages/e2e-tests/fixtures/connections-page.js Normal file
View File

@@ -0,0 +1,16 @@
const path = require('node:path');
const { BasePage } = require('./base-page');
export class ConnectionsPage extends BasePage {
async screenshot(options = {}) {
const { path: plainPath, ...restOptions } = options;
const computedPath = path.join('connections', plainPath);
return await super.screenshot({ path: computedPath, ...restOptions });
}
async clickAddConnectionButton() {
await this.page.getByTestId('add-connection-button').click();
}
}

12
packages/e2e-tests/fixtures/executions-page.js Normal file
View File

@@ -0,0 +1,12 @@
const path = require('node:path');
const { BasePage } = require('./base-page');
export class ExecutionsPage extends BasePage {
async screenshot(options = {}) {
const { path: plainPath, ...restOptions } = options;
const computedPath = path.join('executions', plainPath);
return await super.screenshot({ path: computedPath, ...restOptions });
}
}

27
packages/e2e-tests/fixtures/flow-editor-page.js Normal file
View File

@@ -0,0 +1,27 @@
const path = require('node:path');
const { BasePage } = require('./base-page');
export class FlowEditorPage extends BasePage {
constructor(page) {
super(page);
this.appAutocomplete = this.page.getByTestId('choose-app-autocomplete');
this.eventAutocomplete = this.page.getByTestId('choose-event-autocomplete');
this.continueButton = this.page.getByTestId('flow-substep-continue-button');
this.connectionAutocomplete = this.page.getByTestId(
'choose-connection-autocomplete'
);
this.testOuput = this.page.getByTestId('flow-test-substep-output');
this.unpublishFlowButton = this.page.getByTestId('unpublish-flow-button');
this.publishFlowButton = this.page.getByTestId('publish-flow-button');
this.infoSnackbar = this.page.getByTestId('flow-cannot-edit-info-snackbar');
this.trigger = this.page.getByLabel('Trigger on weekends?');
}
async screenshot(options = {}) {
const { path: plainPath, ...restOptions } = options;
const computedPath = path.join('flow-editor', plainPath);
return await super.screenshot({ path: computedPath, ...restOptions });
}
}

28
packages/e2e-tests/fixtures/index.js Normal file
View File

@@ -0,0 +1,28 @@
const base = require('@playwright/test');
const { ApplicationsPage } = require('./applications-page');
const { ConnectionsPage } = require('./connections-page');
const { ExecutionsPage } = require('./executions-page');
const { FlowEditorPage } = require('./flow-editor-page');
const { LoginPage } = require('./login-page');
exports.test = base.test.extend({
page: async ({ page }, use) => {
await new LoginPage(page).login();
await use(page);
},
applicationsPage: async ({ page }, use) => {
await use(new ApplicationsPage(page));
},
connectionsPage: async ({ page }, use) => {
await use(new ConnectionsPage(page));
},
executionsPage: async ({ page }, use) => {
await use(new ExecutionsPage(page));
},
flowEditorPage: async ({ page }, use) => {
await use(new FlowEditorPage(page));
},
});
exports.expect = base.expect;

27
packages/e2e-tests/fixtures/login-page.js Normal file
View File

@@ -0,0 +1,27 @@
const path = require('node:path');
const { BasePage } = require('./base-page');
export class LoginPage extends BasePage {
/**
* @param {import('@playwright/test').Page} page
*/
constructor(page) {
super(page);
this.page = page;
this.emailTextField = this.page.getByTestId('email-text-field');
this.passwordTextField = this.page.getByTestId('password-text-field');
this.loginButton = this.page.getByTestId('login-button');
}
path = '/login';
async login() {
await this.page.goto(this.path);
await this.emailTextField.fill(process.env.LOGIN_EMAIL);
await this.passwordTextField.fill(process.env.LOGIN_PASSWORD);
await this.loginButton.click();
}
}

8
packages/e2e-tests/package.json
View File

@@ -5,7 +5,8 @@
"private": true,
"description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
"scripts": {
"open": "cypress open"
"test": "playwright test",
"test:fast": "yarn test -j 90% --quiet --reporter null --ignore-snapshots -x"
},
"contributors": [
{
@@ -22,6 +23,9 @@
"url": "https://github.com/automatisch/automatisch/issues"
},
"devDependencies": {
"cypress": "^10.9.0"
"@playwright/test": "^1.36.2"
},
"dependencies": {
"dotenv": "^16.3.1"
}
}

82
packages/e2e-tests/playwright.config.js Normal file
View File

@@ -0,0 +1,82 @@
// @ts-check
const { defineConfig, devices } = require('@playwright/test');
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
require('dotenv').config();
/**
* @see https://playwright.dev/docs/test-configuration
*/
module.exports = defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: process.env.CI ? 'github' : 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: process.env.CI
? 'https://sandbox.automatisch.io'
: 'http://localhost:3001',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
testIdAttribute: 'data-test',
viewport: { width: 1280, height: 720 },
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },
// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});

66
packages/e2e-tests/tests/apps/list-apps.spec.js Normal file
View File

@@ -0,0 +1,66 @@
// @ts-check
const { test, expect } = require('../../fixtures/index');
test.describe('Apps page', () => {
test.beforeEach(async ({ page, applicationsPage }) => {
await page.getByTestId('apps-page-drawer-link').click();
});
test('displays applications', async ({ page, applicationsPage }) => {
await page.getByTestId('apps-loader').waitFor({
state: 'detached',
});
await expect(page.getByTestId('app-row')).not.toHaveCount(0);
await applicationsPage.screenshot({
path: 'Applications.png',
});
});
test.describe('can add connection', () => {
test.beforeEach(async ({ page }) => {
await expect(page.getByTestId('add-connection-button')).toBeVisible();
await page.getByTestId('add-connection-button').click();
await page
.getByTestId('search-for-app-loader')
.waitFor({ state: 'detached' });
});
test('lists applications', async ({ page, applicationsPage }) => {
const appListItemCount = await page.getByTestId('app-list-item').count();
expect(appListItemCount).toBeGreaterThan(10);
await applicationsPage.clickAway();
});
test('searches an application', async ({ page, applicationsPage }) => {
await page.getByTestId('search-for-app-text-field').fill('DeepL');
await expect(page.getByTestId('app-list-item')).toHaveCount(1);
await applicationsPage.clickAway();
});
test('goes to app page to create a connection', async ({
page,
applicationsPage,
}) => {
await page.getByTestId('app-list-item').first().click();
await expect(page).toHaveURL('/app/deepl/connections/add?shared=false');
await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
await applicationsPage.clickAway();
});
test('closes the dialog on backdrop click', async ({
page,
applicationsPage,
}) => {
await page.getByTestId('app-list-item').first().click();
await expect(page).toHaveURL('/app/deepl/connections/add?shared=false');
await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
await applicationsPage.clickAway();
await expect(page).toHaveURL('/app/deepl/connections');
await expect(page.getByTestId('add-app-connection-dialog')).toBeHidden();
});
});
});

49
packages/e2e-tests/tests/connections/create-connection.spec.js Normal file
View File

@@ -0,0 +1,49 @@
// @ts-check
const { test, expect } = require('../../fixtures/index');
test.describe('Connections page', () => {
test.beforeEach(async ({ page, connectionsPage }) => {
await page.getByTestId('apps-page-drawer-link').click();
await page.goto('/app/ntfy/connections');
});
test('shows connections if any', async ({ page, connectionsPage }) => {
await page.getByTestId('apps-loader').waitFor({
state: 'detached',
});
await connectionsPage.screenshot({
path: 'Connections.png',
});
});
test.describe('can add connection', () => {
test('has a button to open add connection dialog', async ({ page }) => {
await expect(page.getByTestId('add-connection-button')).toBeVisible();
});
test('add connection button takes user to add connection page', async ({
page,
connectionsPage,
}) => {
await connectionsPage.clickAddConnectionButton();
await expect(page).toHaveURL('/app/ntfy/connections/add?shared=false');
});
test('shows add connection dialog to create a new connection', async ({
page,
connectionsPage,
}) => {
await connectionsPage.clickAddConnectionButton();
await expect(page).toHaveURL('/app/ntfy/connections/add?shared=false');
await page.getByTestId('create-connection-button').click();
await expect(
page.getByTestId('create-connection-button')
).not.toBeVisible();
await connectionsPage.screenshot({
path: 'Ntfy connections after creating a connection.png',
});
});
});
});

37
packages/e2e-tests/tests/executions/display-execution.spec.js Normal file
View File

@@ -0,0 +1,37 @@
// @ts-check
const { test, expect } = require('../../fixtures/index');
test.describe('Executions page', () => {
test.beforeEach(async ({ page, executionsPage }) => {
await page.getByTestId('executions-page-drawer-link').click();
await page.getByTestId('execution-row').first().click();
await expect(page).toHaveURL(/\/executions\//);
});
test('displays data in by default', async ({ page, executionsPage }) => {
await expect(page.getByTestId('execution-step').last()).toBeVisible();
await expect(page.getByTestId('execution-step')).toHaveCount(2);
await executionsPage.screenshot({
path: 'Execution - data in.png',
});
});
test('displays data out', async ({ page, executionsPage }) => {
const executionStepCount = await page.getByTestId('execution-step').count();
for (let i = 0; i < executionStepCount; i++) {
await page.getByTestId('data-out-tab').nth(i).click();
await expect(page.getByTestId('data-out-panel').nth(i)).toBeVisible();
await executionsPage.screenshot({
path: `Execution - data out - ${i}.png`,
animations: 'disabled',
});
}
});
test('does not display error', async ({ page }) => {
await expect(page.getByTestId('error-tab')).toBeHidden();
});
});

17
packages/e2e-tests/tests/executions/list-executions.spec.js Normal file
View File

@@ -0,0 +1,17 @@
// @ts-check
const { test, expect } = require('../../fixtures/index');
test.describe('Executions page', () => {
test.beforeEach(async ({ page, executionsPage }) => {
await page.getByTestId('executions-page-drawer-link').click();
});
test('displays executions', async ({ page, executionsPage }) => {
await page.getByTestId('executions-loader').waitFor({
state: 'detached',
});
await expect(page.getByTestId('execution-row').first()).toBeVisible();
await executionsPage.screenshot({ path: 'Executions.png' });
});
});

204
packages/e2e-tests/tests/flow-editor/create-flow.spec.js Normal file
View File

@@ -0,0 +1,204 @@
// @ts-check
const { FlowEditorPage } = require('../../fixtures/flow-editor-page');
const { LoginPage } = require('../../fixtures/login-page');
const { test, expect } = require('../../fixtures/index');
test.describe.configure({ mode: 'serial' });
let flowEditorPage;
test.beforeAll(async ({ browser }) => {
const page = await browser.newPage();
await new LoginPage(page).login();
flowEditorPage = new FlowEditorPage(page);
});
test('create flow', async ({}) => {
await flowEditorPage.page.getByTestId('create-flow-button').click();
await expect(flowEditorPage.page).toHaveURL(/\/editor\/create/);
await expect(flowEditorPage.page).toHaveURL(
/\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
);
});
test('has two steps by default', async ({}) => {
await expect(flowEditorPage.page.getByTestId('flow-step')).toHaveCount(2);
});
test.describe('arrange Scheduler trigger', () => {
test.describe('choose app and event substep', () => {
test('choose application', async ({}) => {
await flowEditorPage.appAutocomplete.click();
await flowEditorPage.page
.getByRole('option', { name: 'Scheduler' })
.click();
});
test('choose an event', async ({}) => {
await expect(flowEditorPage.eventAutocomplete).toBeVisible();
await flowEditorPage.eventAutocomplete.click();
await flowEditorPage.page
.getByRole('option', { name: 'Every hour' })
.click();
});
test('continue to next step', async ({}) => {
await flowEditorPage.continueButton.click();
});
test('collapses the substep', async ({}) => {
await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
});
});
test.describe('set up a trigger', () => {
test('choose "yes" in "trigger on weekends?"', async ({}) => {
await expect(flowEditorPage.trigger).toBeVisible();
await flowEditorPage.trigger.click();
await flowEditorPage.page.getByRole('option', { name: 'Yes' }).click();
});
test('continue to next step', async ({}) => {
await flowEditorPage.continueButton.click();
});
test('collapses the substep', async ({}) => {
await expect(flowEditorPage.trigger).not.toBeVisible();
});
});
test.describe('test trigger', () => {
test('show sample output', async ({}) => {
await expect(flowEditorPage.testOuput).not.toBeVisible();
await flowEditorPage.continueButton.click();
await expect(flowEditorPage.testOuput).toBeVisible();
await flowEditorPage.screenshot({
path: 'Scheduler trigger test output.png',
});
await flowEditorPage.continueButton.click();
});
});
});
test.describe('arrange Ntfy action', () => {
test.describe('choose app and event substep', () => {
test('choose application', async ({}) => {
await flowEditorPage.appAutocomplete.click();
await flowEditorPage.page.getByRole('option', { name: 'Ntfy' }).click();
});
test('choose an event', async ({}) => {
await expect(flowEditorPage.eventAutocomplete).toBeVisible();
await flowEditorPage.eventAutocomplete.click();
await flowEditorPage.page
.getByRole('option', { name: 'Send message' })
.click();
});
test('continue to next step', async ({}) => {
await flowEditorPage.continueButton.click();
});
test('collapses the substep', async ({}) => {
await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
});
});
test.describe('choose connection', () => {
test('choose connection list item', async ({}) => {
await flowEditorPage.connectionAutocomplete.click();
await flowEditorPage.page.getByRole('option').first().click();
});
test('continue to next step', async ({}) => {
await flowEditorPage.continueButton.click();
});
test('collapses the substep', async ({}) => {
await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
});
});
test.describe('set up action', () => {
test('fill topic and message body', async ({}) => {
await flowEditorPage.page
.getByTestId('parameters.topic-power-input')
.locator('[contenteditable]')
.fill('Topic');
await flowEditorPage.page
.getByTestId('parameters.message-power-input')
.locator('[contenteditable]')
.fill('Message body');
});
test('continue to next step', async ({}) => {
await flowEditorPage.continueButton.click();
});
test('collapses the substep', async ({}) => {
await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
});
});
test.describe('test trigger', () => {
test('show sample output', async ({}) => {
await expect(flowEditorPage.testOuput).not.toBeVisible();
await flowEditorPage.page
.getByTestId('flow-substep-continue-button')
.first()
.click();
await expect(flowEditorPage.testOuput).toBeVisible();
await flowEditorPage.screenshot({
path: 'Ntfy action test output.png',
});
await flowEditorPage.continueButton.click();
});
});
});
test.describe('publish and unpublish', () => {
test('publish flow', async ({}) => {
await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
await expect(flowEditorPage.publishFlowButton).toBeVisible();
await flowEditorPage.publishFlowButton.click();
await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
});
test('shows read-only sticky snackbar', async ({}) => {
await expect(flowEditorPage.infoSnackbar).toBeVisible();
await flowEditorPage.screenshot({
path: 'Published flow.png',
});
});
test('unpublish from snackbar', async ({}) => {
await flowEditorPage.page
.getByTestId('unpublish-flow-from-snackbar')
.click();
await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
});
test('publish once again', async ({}) => {
await expect(flowEditorPage.publishFlowButton).toBeVisible();
await flowEditorPage.publishFlowButton.click();
await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
});
test('unpublish from layout top bar', async ({}) => {
await expect(flowEditorPage.unpublishFlowButton).toBeVisible();
await flowEditorPage.unpublishFlowButton.click();
await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
await flowEditorPage.screenshot({
path: 'Unpublished flow.png',
});
});
});
test.describe('in layout', () => {
test('can go back to flows page', async ({}) => {
await flowEditorPage.page.getByTestId('editor-go-back-button').click();
await expect(flowEditorPage.page).toHaveURL('/flows');
});
});