├── index.html ├── tsconfig.json ├── cypress.json ├── .gitignore ├── images └── logs.png ├── cypress ├── integration │ ├── ts-spec.ts │ └── spec.js ├── support │ └── index.js └── plugins │ └── index.js ├── package.json ├── .github └── workflows │ └── included.yml └── README.md /index.html: -------------------------------------------------------------------------------- 1 | 2 |

Page

3 | 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["*.ts"], 3 | "exclude": [] 4 | } 5 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixturesFolder": false, 3 | "projectId": "1b7u2t" 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | cypress/videos 2 | cypress/fixtures 3 | node_modules/ 4 | cypress/screenshots 5 | -------------------------------------------------------------------------------- /images/logs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bahmutov/cypress-gh-action-included/HEAD/images/logs.png -------------------------------------------------------------------------------- /cypress/integration/ts-spec.ts: -------------------------------------------------------------------------------- 1 | it('works in typescript', () => { 2 | cy.visit('index.html') 3 | cy.contains('Page').should('be.visible') 4 | }) 5 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | const options = { 2 | printLogs: 'always' 3 | } 4 | require('cypress-terminal-report/src/installLogsCollector')(options); 5 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | console.log('in file cypress/plugins/index.js') 2 | 3 | module.exports = (on) => { 4 | console.log('loading cypress-terminal-report') 5 | require('cypress-terminal-report/src/installLogsPrinter')(on); 6 | }; 7 | -------------------------------------------------------------------------------- /cypress/integration/spec.js: -------------------------------------------------------------------------------- 1 | // https://github.com/testing-library/cypress-testing-library#installation 2 | import '@testing-library/cypress/add-commands' 3 | 4 | it('works', () => { 5 | cy.visit('index.html') 6 | cy.contains('Page').should('be.visible') 7 | 8 | // use command from cypress-testing-library 9 | cy.findByText('Page').should('be.visible') 10 | }) 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-gh-action-included", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "Example showing how to use cypress/included Docker image inside GH Actions CI", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "docker run -it -v $PWD:/test -w /test cypress/included:4.11.0" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/bahmutov/cypress-gh-action-included.git" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/bahmutov/cypress-gh-action-included/issues" 19 | }, 20 | "homepage": "https://github.com/bahmutov/cypress-gh-action-included#readme", 21 | "devDependencies": { 22 | "@testing-library/cypress": "6.0.0", 23 | "cypress-terminal-report": "1.4.1", 24 | "typescript": "3.9.7" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.github/workflows/included.yml: -------------------------------------------------------------------------------- 1 | name: included 2 | on: [push] 3 | jobs: 4 | cypress-run: 5 | runs-on: ubuntu-latest 6 | # Docker image with Cypress pre-installed 7 | # https://github.com/cypress-io/cypress-docker-images/tree/master/included 8 | container: cypress/included:4.11.0 9 | steps: 10 | - name: Checkout 🛎 11 | uses: actions/checkout@v1 12 | 13 | # normally we would NOT need to install NPM dependencies 14 | # but in this repo we are using additional plugins listed in package.json 15 | # thus we need to install them 16 | - name: Install dependencies 📦 17 | # we could simply run "npm ci" but that would not cache dependencies 18 | # thus we can use this 3rd party action 19 | uses: bahmutov/npm-install@v1 20 | 21 | - name: Run tests 🧪 22 | run: cypress run --record 23 | env: 24 | # pass the Dashboard record key as an environment variable 25 | CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} 26 | 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cypress-gh-action-included ![status](https://github.com/bahmutov/cypress-gh-action-included/workflows/included/badge.svg?branch=master) 2 | > Example showing how to run [cypress/included Docker image][1] inside GH Actions CI 3 | 4 | This repository contains the static page [index.html](index.html) tested by Cypress Test Runner in [cypress/integration/spec.js](cypress/integration/spec.js). There is nothing to install or start, how can we run these tests in the simplest way? 5 | 6 | Fact: you can run Cypress tests locally without installing dependencies 7 | 8 | ```shell 9 | docker run -it -v $PWD:/test -w /test cypress/included:3.8.3 10 | ``` 11 | 12 | Then: run the same on GH Actions CI. See [.github/workflows/included.yml](.github/workflows/included.yml), but in general 13 | 14 | ```yml 15 | name: included 16 | on: [push] 17 | jobs: 18 | cypress-run: 19 | runs-on: ubuntu-latest 20 | # Docker image with Cypress pre-installed 21 | # https://github.com/cypress-io/cypress-docker-images/tree/master/included 22 | container: cypress/included:4.11.0 23 | steps: 24 | - uses: actions/checkout@v1 25 | - run: cypress run 26 | ``` 27 | 28 | [1]: https://github.com/cypress-io/cypress-docker-images/tree/master/included 29 | 30 | ## Local plugins 31 | 32 | This repo also shows that you can install additional NPM modules and load them from globally installed Cypress. For example, the tests use [cypress-testing-library](https://github.com/testing-library/cypress-testing-library), [cypress-terminal-report](https://github.com/archfz/cypress-terminal-report) and typescript. 33 | 34 | ![Terminal logs](images/logs.png) 35 | 36 | Which is why on CI we need to run `npm ci` to install them. 37 | --------------------------------------------------------------------------------