By Rohit Shinde | LinkedIn
Using Cypress, we will create a test automation framework with the following features:
- The Page Object Model is a pattern
- BDD (Cucumber) support
- Multi-environment and multi-browser testing support
- Create reports that include videos and screenshots
- Test results dashboard with options to compare, analyze history, and generate graphs.
- CI integration
- I changed the current tests with application running locally, hence github actions will fail onwards 21st April.
- Current application used to create tests is from Cypress - https://github.com/cypress-io/cypress-realworld-app
npm init -y npm install cypress --save-dev npx cypress open npm install @bahmutov/cypress-esbuild-preprocessor --save-dev npm install @badeball/cypress-cucumber-preprocessor --save-dev cypress.config.js
const { defineConfig } = require("cypress"); const createBundler = require("@bahmutov/cypress-esbuild-preprocessor"); const preprocessor = require("@badeball/cypress-cucumber-preprocessor"); const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild"); module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { on("file:preprocessor", createBundler({ plugins: [createEsbuildPlugin.default(config)], })); preprocessor.addCucumberPreprocessorPlugin(on, config); return config; }, specPattern: "**/*.feature", }, });package.json
"cypress-cucumber-preprocessor": { "step_definitions": "cypress/support/step_definitions/", "nonGlobalStepDefinitions": false }package.json
"scripts": { "cy:headless": "cypress run --config baseUrl=${baseUrl} --headless", "cy:chrome:headless": "cypress run --config baseUrl=${baseUrl} --browser chrome --headless --record", "cy:firefox:headless": "cypress run --config baseUrl=${baseUrl} --browser firefox --headless --record", "cy:chrome": "cypress run --config baseUrl=${baseUrl} --browser chrome", "cy:firefox": "cypress run --config baseUrl=${baseUrl} --browser firefox", "cy:headed": "cypress run --config baseUrl=${baseUrl} --headed", "cy:test": "cypress run --config baseUrl=${baseUrl}" }cypress.config.js
module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { ... }, ..., videosFolder: "cypress/reports/videos", screenshotsFolder: "cypress/reports/screenshots", }, })npm install cypress-mochawesome-reporter --save-dev cypress.config.js
module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { ..., require('cypress-mochawesome-reporter/plugin')(on); }, ..., reporter: 'cypress-mochawesome-reporter', reporterOptions: { charts: true, reportPageTitle: 'custom-title', embeddedScreenshots: true, inlineAssets: true, saveAllAttempts: false, }, }, })e2e.js
import 'cypress-mochawesome-reporter/register';https://cloud.cypress.io/ module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { ... }, ..., projectId: "xxxxxx", }, })"CYPRESS_RECORD_KEY" > From cypress dashboard .github/workflows/main.yml
name: Run All Tests on: push: branches: [master] jobs: Test-on-Chrome: runs-on: ubuntu-latest steps: - name: Checkout GitCode uses: actions/checkout@v3.3.0 - name: Install dependencies uses: cypress-io/github-action@v5.0.8 with: runTests: false - name: Run Cypress Tests uses: cypress-io/github-action@v5.0.8 with: record: true parallel: true command: "npm run cy:chrome:headless" env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} - name: Upload Videos to Build Artifacts uses: actions/upload-artifact@v3.1.2 if: always() with: name: cypress-videos-chrome path: "${{ github.workspace }}/cypress/reports/videos/" - name: Upload Screenshots to Build Artifacts uses: actions/upload-artifact@v3.1.2 if: failure() with: name: cypress-screenshots-chrome path: "${{ github.workspace }}/cypress/reports/screenshots/" - name: Upload Mocha report to Build Artifacts uses: actions/upload-artifact@v3.1.2 if: always() with: name: cypress-mocha-chrome path: "${{ github.workspace }}/cypress/reports/html/" npx cypress run --record --key {PROJECT_ACCESS_KEY}