From da2a4158b1758b273ec5e1939b141c1544090f94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Thu, 15 Jun 2023 18:31:24 +0200 Subject: [PATCH 1/4] replaces Cypress with Playwright --- .eslintignore | 1 - .github/workflows/e2e.yml | 25 + .github/workflows/test.yml | 32 - .gitignore | 9 +- README.md | 2 +- cypress.config.ts | 10 - cypress/e2e/1-getting-started/todo.cy.js | 143 -- cypress/e2e/2-advanced-examples/actions.cy.js | 299 ---- .../e2e/2-advanced-examples/aliasing.cy.js | 39 - .../e2e/2-advanced-examples/assertions.cy.js | 176 --- .../e2e/2-advanced-examples/connectors.cy.js | 97 -- cypress/e2e/2-advanced-examples/cookies.cy.js | 77 - .../e2e/2-advanced-examples/cypress_api.cy.js | 183 --- cypress/e2e/2-advanced-examples/files.cy.js | 87 -- .../e2e/2-advanced-examples/location.cy.js | 32 - cypress/e2e/2-advanced-examples/misc.cy.js | 104 -- .../e2e/2-advanced-examples/navigation.cy.js | 56 - .../network_requests.cy.js | 163 --- .../e2e/2-advanced-examples/querying.cy.js | 114 -- .../spies_stubs_clocks.cy.js | 203 --- cypress/e2e/2-advanced-examples/storage.cy.js | 110 -- .../e2e/2-advanced-examples/traversal.cy.js | 121 -- .../e2e/2-advanced-examples/utilities.cy.js | 108 -- .../e2e/2-advanced-examples/viewport.cy.js | 59 - cypress/e2e/2-advanced-examples/waiting.cy.js | 31 - cypress/e2e/2-advanced-examples/window.cy.js | 22 - cypress/fixtures/example.json | 5 - cypress/fixtures/profile.json | 5 - cypress/fixtures/users.json | 232 --- cypress/support/commands.ts | 37 - cypress/support/e2e.ts | 20 - e2e/basic-example.spec.ts | 15 + e2e/demo-todo-app.spec.ts | 424 ++++++ package.json | 8 +- playwright.config.ts | 82 ++ src/pages/docs/tests.mdx | 4 +- tsconfig.json | 2 +- yarn.lock | 1254 ++--------------- 38 files changed, 684 insertions(+), 3707 deletions(-) create mode 100644 .github/workflows/e2e.yml delete mode 100644 .github/workflows/test.yml delete mode 100644 cypress.config.ts delete mode 100644 cypress/e2e/1-getting-started/todo.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/actions.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/aliasing.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/assertions.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/connectors.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/cookies.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/cypress_api.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/files.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/location.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/misc.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/navigation.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/network_requests.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/querying.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/storage.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/traversal.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/utilities.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/viewport.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/waiting.cy.js delete mode 100644 cypress/e2e/2-advanced-examples/window.cy.js delete mode 100644 cypress/fixtures/example.json delete mode 100644 cypress/fixtures/profile.json delete mode 100644 cypress/fixtures/users.json delete mode 100644 cypress/support/commands.ts delete mode 100644 cypress/support/e2e.ts create mode 100644 e2e/basic-example.spec.ts create mode 100644 e2e/demo-todo-app.spec.ts create mode 100644 playwright.config.ts diff --git a/.eslintignore b/.eslintignore index 4350d19..db3d6d5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,4 @@ /.next /node_modules -/cypress /public /storybook-static diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml new file mode 100644 index 0000000..f336d37 --- /dev/null +++ b/.github/workflows/e2e.yml @@ -0,0 +1,25 @@ +name: e2e:tests + +on: [pull_request] + +jobs: + e2e_client: + timeout-minutes: 15 + runs-on: ubuntu-22.04 + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' + - name: Install dependencies + run: yarn + - name: Install Playwright Browsers + run: yarn playwright install --with-deps + - name: Run Playwright tests + run: yarn playwright test + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml deleted file mode 100644 index 5baba12..0000000 --- a/.github/workflows/test.yml +++ /dev/null @@ -1,32 +0,0 @@ -name: Run tests - -on: [pull_request] - -jobs: - test: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - name: Setup node - uses: actions/setup-node@v3 - with: - node-version-file: '.nvmrc' - cache: 'yarn' - cache-dependency-path: yarn.lock - - run: corepack enable && corepack prepare - - - name: Get yarn cache directory path - id: yarn-cache-dir-path - run: echo "::set-output name=dir::$(yarn config get cacheFolder)" - - - name: Yarn cache - uses: actions/cache@v3 - id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) - with: - path: ${{ steps.yarn-cache-dir-path.outputs.dir }} - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-yarn- - - - run: yarn install --immutable - - run: yarn test diff --git a/.gitignore b/.gitignore index e448387..033f079 100644 --- a/.gitignore +++ b/.gitignore @@ -35,10 +35,6 @@ yarn-error.log* # vercel .vercel -# Test with Cypress -/cypress/screenshots -/cypress/videos - # Yarn .yarn/* .pnp.* @@ -48,3 +44,8 @@ tsconfig.tsbuildinfo # storybook /storybook-static/ + +# e2e testing +/e2e/test-results/ +/playwright-report/ +/playwright/.cache/ diff --git a/README.md b/README.md index 7db3298..e010425 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This is a project template which could be used to the creation of new projects. - Authentication based on [Next-Auth](https://next-auth.js.org/) already implemented - [Redux](https://redux.js.org/) and [Redux-Toolkit](https://redux-toolkit.js.org/) - [Typescript](https://www.typescriptlang.org/) already configured -- [Cypress](https://www.cypress.io/) as testing client +- [Playwright](https://playwright.dev/) as e2e testing framework - git workflow and hooks - editorconfig and code style based on [Airbnb](https://github.com/airbnb/javascript) - [Storybook](https://storybook.js.org/) also available and configured diff --git a/cypress.config.ts b/cypress.config.ts deleted file mode 100644 index 9fb6fee..0000000 --- a/cypress.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { defineConfig } from 'cypress'; - -export default defineConfig({ - e2e: { - baseUrl: 'http://localhost:3000', - screenshotOnRunFailure: false, - video: false, - videoUploadOnPasses: false, - }, -}); diff --git a/cypress/e2e/1-getting-started/todo.cy.js b/cypress/e2e/1-getting-started/todo.cy.js deleted file mode 100644 index 4768ff9..0000000 --- a/cypress/e2e/1-getting-started/todo.cy.js +++ /dev/null @@ -1,143 +0,0 @@ -/// - -// Welcome to Cypress! -// -// This spec file contains a variety of sample tests -// for a todo list app that are designed to demonstrate -// the power of writing tests in Cypress. -// -// To learn more about how Cypress works and -// what makes it such an awesome testing tool, -// please read our getting started guide: -// https://on.cypress.io/introduction-to-cypress - -describe('example to-do app', () => { - beforeEach(() => { - // Cypress starts out with a blank slate for each test - // so we must tell it to visit our website with the `cy.visit()` command. - // Since we want to visit the same URL at the start of all our tests, - // we include it in our beforeEach function so that it runs before each test - cy.visit('https://example.cypress.io/todo') - }) - - it('displays two todo items by default', () => { - // We use the `cy.get()` command to get all elements that match the selector. - // Then, we use `should` to assert that there are two matched items, - // which are the two default items. - cy.get('.todo-list li').should('have.length', 2) - - // We can go even further and check that the default todos each contain - // the correct text. We use the `first` and `last` functions - // to get just the first and last matched elements individually, - // and then perform an assertion with `should`. - cy.get('.todo-list li').first().should('have.text', 'Pay electric bill') - cy.get('.todo-list li').last().should('have.text', 'Walk the dog') - }) - - it('can add new todo items', () => { - // We'll store our item text in a variable so we can reuse it - const newItem = 'Feed the cat' - - // Let's get the input element and use the `type` command to - // input our new list item. After typing the content of our item, - // we need to type the enter key as well in order to submit the input. - // This input has a data-test attribute so we'll use that to select the - // element in accordance with best practices: - // https://on.cypress.io/selecting-elements - cy.get('[data-test=new-todo]').type(`${newItem}{enter}`) - - // Now that we've typed our new item, let's check that it actually was added to the list. - // Since it's the newest item, it should exist as the last element in the list. - // In addition, with the two default items, we should have a total of 3 elements in the list. - // Since assertions yield the element that was asserted on, - // we can chain both of these assertions together into a single statement. - cy.get('.todo-list li') - .should('have.length', 3) - .last() - .should('have.text', newItem) - }) - - it('can check off an item as completed', () => { - // In addition to using the `get` command to get an element by selector, - // we can also use the `contains` command to get an element by its contents. - // However, this will yield the