├── .github └── workflows │ ├── badges.yml │ └── ci.yml ├── .gitignore ├── README.md ├── cypress.config.js ├── cypress ├── README.md └── e2e │ └── spec.cy.js ├── package-lock.json ├── package.json └── src └── index.js /.github/workflows/badges.yml: -------------------------------------------------------------------------------- 1 | name: badges 2 | on: 3 | schedule: 4 | # update badges every night 5 | # because we have a few badges that are linked 6 | # to the external repositories 7 | - cron: '0 3 * * *' 8 | 9 | jobs: 10 | badges: 11 | name: Badges 12 | runs-on: ubuntu-20.04 13 | steps: 14 | - name: Checkout 🛎 15 | uses: actions/checkout@v2 16 | 17 | - name: Update version badges 🏷 18 | run: npm run badges 19 | 20 | - name: Commit any changed files 💾 21 | uses: stefanzweifel/git-auto-commit-action@v4 22 | with: 23 | commit_message: Updated badges 24 | branch: main 25 | file_pattern: README.md 26 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | on: push 3 | permissions: 4 | actions: write 5 | jobs: 6 | release: 7 | runs-on: ubuntu-20.04 8 | if: github.ref == 'refs/heads/main' 9 | steps: 10 | - name: Checkout 🛎 11 | uses: actions/checkout@v3 12 | 13 | - name: Install only the semantic release 📦 14 | run: npm install semantic-release 15 | 16 | - name: Semantic Release 🚀 17 | uses: cycjimmy/semantic-release-action@v3 18 | with: 19 | branch: main 20 | env: 21 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 22 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cypress-playwright 2 | > Run Cypress tests using Playwright and Playwright tests using Cypress 3 | 4 | This package provides a bridge between Cypress and Playwright test runners. You can execute Cy tests using Pw and the inverse. 5 | 6 | --- 7 | Before using please read [this](https://cypresstips.substack.com/p/cypress-tips-april-2023) 🚨 8 | --- 9 | 10 | ## Install 11 | 12 | ``` 13 | # install this package using NPM 14 | $ npm i -D cypress-playwright 15 | # or using Yarn 16 | $ yarn add -D cypress-playwright 17 | ``` 18 | 19 | If using Cypress, add this package to your [Cypress support file](https://on.cypress.io/support-file) 20 | 21 | ```js 22 | // cypress/support/e2e.js 23 | import 'cypress-playwright' 24 | ``` 25 | 26 | Voilá you can now run your Playwright tests in Cypress and Cypress tests in Playwright! Plus use `await` keyword with all Cypress commands: 27 | 28 | ```js 29 | // Cypress spec 30 | await it('works', async () => { 31 | await cy.visit('/') 32 | const $el = await cy.get('selector') 33 | expect($el).to.be.visible 34 | // or use "should" assertions 35 | $el.should.be.visible 36 | }) 37 | ``` 38 | 39 | Want to open 2nd tab and test your chat application? No problem! 40 | 41 | ```js 42 | // Cypress spec 43 | cy.get('selector button').click() // opens the second tab 44 | // use PW syntax to wait for the 2nd tab to open 45 | const secondPage = await context.waitForEvent('page') 46 | await newPage.waitForLoadState() 47 | // continue using Cy to test the second page 48 | cy.get('selector on the second tab').type('something') 49 | // now close the 2nd page and switch to the first 50 | cy.get('close button selector').click() 51 | // or simply use 52 | await newPage.close() 53 | // we are back on the first page! 54 | ``` 55 | 56 | ## Small print 57 | 58 | Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2023 59 | 60 | - [@bahmutov](https://twitter.com/bahmutov) 61 | - [glebbahmutov.com](https://glebbahmutov.com) 62 | - [blog](https://glebbahmutov.com/blog) 63 | - [videos](https://www.youtube.com/glebbahmutov) 64 | - [presentations](https://slides.com/bahmutov) 65 | - [cypress.tips](https://cypress.tips) 66 | - [Cypress Tips & Tricks Newsletter](https://cypresstips.substack.com/) 67 | - [my Cypress courses](https://cypress.tips/courses) 68 | 69 | License: MIT - do anything with the code, but don't blame me if it does not work. 70 | 71 | Support: if you find any problems with this module, email / tweet / 72 | [open issue](https://github.com/bahmutov/cypress-playwright/issues) on Github 73 | 74 | ## MIT License 75 | 76 | Copyright (c) 2023 Gleb Bahmutov <gleb.bahmutov@gmail.com> 77 | 78 | Permission is hereby granted, free of charge, to any person 79 | obtaining a copy of this software and associated documentation 80 | files (the "Software"), to deal in the Software without 81 | restriction, including without limitation the rights to use, 82 | copy, modify, merge, publish, distribute, sublicense, and/or sell 83 | copies of the Software, and to permit persons to whom the 84 | Software is furnished to do so, subject to the following 85 | conditions: 86 | 87 | The above copyright notice and this permission notice shall be 88 | included in all copies or substantial portions of the Software. 89 | 90 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 91 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 92 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 93 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 94 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 95 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 96 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 97 | OTHER DEALINGS IN THE SOFTWARE. 98 | 99 | April 1st 2023 100 | -------------------------------------------------------------------------------- /cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | e2e: { 5 | // baseUrl, etc 6 | supportFile: false, 7 | fixturesFolder: false, 8 | setupNodeEvents(on, config) { 9 | // implement node event listeners here 10 | // and load any plugins that require the Node environment 11 | }, 12 | } 13 | }) 14 | -------------------------------------------------------------------------------- /cypress/README.md: -------------------------------------------------------------------------------- 1 | # Cypress.io end-to-end tests 🚀 2 | 3 | [Cypress.io](https://www.cypress.io) is an open source, MIT licensed end-to-end test runner 4 | 5 | ## Folder structure 6 | 7 | These folders hold the end-to-end tests and supporting files for the [Cypress Test Runner](https://github.com/cypress-io/cypress). 8 | 9 | - [fixtures](fixtures) folder holds optional JSON data for mocking, [read more](https://on.cypress.io/fixture) 10 | - [e2e](e2e) holds the actual end-to-end test files, [read more](https://on.cypress.io/writing-and-organizing-tests) 11 | - [support](support) file runs before all tests and is a great place to write or load additional custom commands, [read more](https://on.cypress.io/writing-and-organizing-tests#Support-file) 12 | 13 | ## `cypress.config.js` file 14 | 15 | You can configure project options in the [../cypress.config.js](../cypress.config.js) file, see [Cypress configuration doc](https://on.cypress.io/configuration). 16 | 17 | ## More information 18 | 19 | - [https://github.com/cypress.io/cypress](https://github.com/cypress.io/cypress) 20 | - [https://docs.cypress.io/](https://docs.cypress.io/) 21 | - [Writing your first Cypress test](https://on.cypress.io/intro) 22 | -------------------------------------------------------------------------------- /cypress/e2e/spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | import '../..' 3 | it('works', () => {}) 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-playwright", 3 | "version": "1.0.0", 4 | "description": "Run Cypress tests using Playwright and Playwright tests using Cypress", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "cypress run", 8 | "semantic-release": "semantic-release" 9 | }, 10 | "files": [ 11 | "src" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/bahmutov/cypress-playwright.git" 16 | }, 17 | "keywords": [ 18 | "cypress", 19 | "playwright" 20 | ], 21 | "author": "Gleb Bahmutov ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/bahmutov/cypress-playwright/issues" 25 | }, 26 | "homepage": "https://github.com/bahmutov/cypress-playwright#readme", 27 | "devDependencies": { 28 | "cypress": "^12.9.0", 29 | "semantic-release": "^20.1.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | console.log('Happy April 1st') 2 | --------------------------------------------------------------------------------