{"id":25969234,"url":"https://github.com/tyler36/cypress-demo","last_synced_at":"2026-04-22T05:34:04.057Z","repository":{"id":275689124,"uuid":"839115762","full_name":"tyler36/cypress-demo","owner":"tyler36","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-31T02:01:51.000Z","size":2875,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-31T04:59:29.488Z","etag":null,"topics":["cypress","demo","e2e","github-workflow","node","testing","vanilla"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tyler36.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-08-07T02:16:00.000Z","updated_at":"2026-03-31T02:01:53.000Z","dependencies_parsed_at":"2025-03-04T01:24:19.047Z","dependency_job_id":"57874d38-feab-4589-9f61-4df6a561d05a","html_url":"https://github.com/tyler36/cypress-demo","commit_stats":null,"previous_names":["tyler36/cypress-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tyler36/cypress-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler36%2Fcypress-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler36%2Fcypress-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler36%2Fcypress-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler36%2Fcypress-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyler36","download_url":"https://codeload.github.com/tyler36/cypress-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyler36%2Fcypress-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32122755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T00:31:26.853Z","status":"online","status_checked_at":"2026-04-22T02:00:05.693Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","demo","e2e","github-workflow","node","testing","vanilla"],"created_at":"2025-03-04T22:47:15.127Z","updated_at":"2026-04-22T05:34:04.052Z","avatar_url":"https://github.com/tyler36.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cypress \u003c!-- omit in toc --\u003e\n\n[![tests](https://github.com/tyler36/cypress-demo/actions/workflows/tests.yml/badge.svg)](https://github.com/tyler36/cypress-demo/actions/workflows/tests.yml)\n[![Dependabot Updates](https://github.com/tyler36/cypress-demo/actions/workflows/dependabot/dependabot-updates/badge.svg)](https://github.com/tyler36/cypress-demo/actions/workflows/dependabot/dependabot-updates)\n\n- [Install](#install)\n- [Run via Docker image](#run-via-docker-image)\n  - [Connecting to a locally hosted site](#connecting-to-a-locally-hosted-site)\n  - [Add GUI ability through WSL](#add-gui-ability-through-wsl)\n- [Configure](#configure)\n  - [Cypress GUI font support](#cypress-gui-font-support)\n  - [Browser language](#browser-language)\n    - [Chrome](#chrome)\n  - [Media output](#media-output)\n    - [Screenshots](#screenshots)\n    - [Videos](#videos)\n  - [Reporter](#reporter)\n- [Plugins](#plugins)\n  - [TypeScript](#typescript)\n  - [Cucumber](#cucumber)\n- [Tips](#tips)\n  - [Iframes](#iframes)\n  - [Network stubbing](#network-stubbing)\n    - [Return fixture results](#return-fixture-results)\n    - [Dynamic](#dynamic)\n    - [Handling errors](#handling-errors)\n- [GitHub Actions](#github-actions)\n  - [Node Projects](#node-projects)\n  - [DDEV projects](#ddev-projects)\n- [Help](#help)\n  - [Element **not** exists](#element-not-exists)\n  - [Environmental Variables](#environmental-variables)\n  - [Basic authentication](#basic-authentication)\n- [VScode](#vscode)\n  - [\"Marcosvfranco.cucumberautocomplete-behat\"](#marcosvfrancocucumberautocomplete-behat)\n- [Troubleshooting](#troubleshooting)\n  - [\"Cypress: error while loading shared libraries: libnss3.so\"](#cypress-error-while-loading-shared-libraries-libnss3so)\n\n## Install\n\n- [Installing Cypress](https://docs.cypress.io/guides/getting-started/installing-cypress.html)\n\n```bash\nnpm install cypress --save-dev\n```\n\n- Add scripts to `package.json`\n\n```json\n{\n  \"scripts\": {\n    ...\n    \"cypress:open\": \"cypress open\",\n    \"cypress:run\": \"cypress run\"\n  }\n}\n```\n\n- The first time Cypress runs, it can take a while to initialize.\n- The `cypress` folder contains boilerplate.\n- `./cypress/integration/examples` directory is safe to delete.\n\n## Run via Docker image\n\n- [Running Cypress via a single Docker command](https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/)\n\n```bash\ndocker run -it --rm -v ${PWD}:/e2e -w /e2e --entrypoint=cypress cypress/included:13.11.0 run\n```\n\n| switch                     | description                                                     |\n| -------------------------- | --------------------------------------------------------------- |\n| `-it`                      | interactive terminal                                            |\n| `-v ${PWD}:/e2e`           | `${PWD}:/e2e` maps the current directory to `/e2e` in the image |\n|                            | - Replace `${PWD}` with `%CD%` if in CMD prompt                 |\n|                            | - `${PWD}` \u0026 `$(pwd)` *should* would in PowerShell \u0026 Ubuntu     |\n| `-w /e2e`                  | set working directory to `/e2e`                                 |\n| `cypress/included:13.11.0` | Cypress image:version to use                                    |\n| `run`                      | command to execute                                              |\n\n- Show container information by replacing `run` with `info`\n\n```bash\ndocker run -it --rm -v ${PWD}:/e2e -w /e2e --entrypoint=cypress cypress/included:13.11.0 info\n```\n\n- Specify a browser using the `--browser` switch. For example: `--browser chrome`, default is `electron`\n\n```bash\ndocker run -it --rm -v ${PWD}:/e2e -w /e2e --entrypoint=cypress cypress/included:13.11.0 run --browser chrome\n```\n\n### Connecting to a locally hosted site\n\n- Run command and pass an environmental variable to point to docker: `-e CYPRESS_baseUrl=http://host.docker.internal:8000`\n- `https://host.docker.internal:8000` shares a local port `8000` with docker.\n\n\u003c!-- markdownlint-disable line-length --\u003e\n```bash\ndocker run -it --rm -v ${PWD}:/e2e -w /e2e --entrypoint=cypress -e CYPRESS_baseUrl=http://host.docker.internal:8000 cypress/included:13.11.0 run\n```\n\u003c!-- markdownlint-enable line-length --\u003e\n\n### Add GUI ability through WSL\n\n- Make sure BASH / Zsh has `DISPLAY` environment variable\n\n```bashrc\necho $DISPLAY\n```\n\n- Run command from **`BASH`** with required switches:\n  - `-e CYPRESS_baseUrl=http://host.docker.internal:8000`,\n  - `-e DISPLAY`,\n  - `open --project .`\n\n\u003c!-- markdownlint-disable line-length --\u003e\n```bash\ndocker run -it --rm -v ${PWD}:/e2e -w /e2e --entrypoint=cypress -e CYPRESS_baseUrl=http://host.docker.internal:8000 -e DISPLAY cypress/included:13.11.0 open --project .\n```\n\u003c!-- markdownlint-enable line-length --\u003e\n\n| switch        | description                                     |\n| ------------- | ----------------------------------------------- |\n| `-e DISPLAY`  | pass the DISPLAY variable through to docker     |\n| `open`        | open cypress                                    |\n| `--project .` | specify the project is in the current directory |\n\n## Configure\n\n### Cypress GUI font support\n\n- If Cypress GUI displays `□` in the step logs, a character set/font is missing.\n- A straight forward solution is to map your local font directory as a volume:\n\n    ```docker\n    services:\n      cypress:\n        image: cypress/included:13.11.0\n        volumes:\n          - /usr/share/fonts:/usr/share/fonts/shared\n    ```\n\n### Browser language\n\n- Firefox removed the language [Command Line Option](https://wiki.mozilla.org/Firefox/CommandLineOptions).\n\n#### Chrome\n\n- On Linux systems, set an environmental variable\n\n```shell\nexport LANG=\"ja_JP.UTF-8\"\n```\n\n- On Cypress Docker images, replicate the Linux method by update `docker-compose.yml`.\n\n```yaml\nservices:\n  cypress:\n    environment:\n      - LANG=ja_JP.UTF-8\n```\n\n- Chrome Windows can add a [launch option](https://developer.chrome.com/extensions/i18n#locales-testing)\n\n```js\n// cypress/plugins/index.js\nmodule.exports = (on, config) =\u003e {\n  on('before:browser:launch', (browser, launchOptions) =\u003e {\n      // Windows only!!\n      if (browser.family === 'chromium') {\n          launchOptions.args.push('--lang=ja')\n          return launchOptions\n      }\n  });\n}\n```\n\n### Media output\n\n#### Screenshots\n\n- Manually take a screenshot\n\n  ```js\n  cy.screenshot()\n  cy.screenshot('screengrab')\n  ```\n\n- Automatically take screenshot when tests fall.\n\n  ```js\n  {\n    screenshotOnRunFailure: true,\n  }\n  ```\n\n- Configure the screenshot output directory:\n\n  ```js\n  {\n    screenshotsFolder: 'logs/screenshots',\n  }\n  ```\n\n@see \u003chttps://docs.cypress.io/api/commands/screenshot\u003e\n\nNOTE: Sites using `height: 100%` or `sticky` elements may generate [issue](https://github.com/cypress-io/cypress/issues/2681).\nCypress stitches together viewport images to create screenshots.\nThis can result in elements, such as headers, scroll-to-top, or colors repeating.\n\n- To resolves `height:100%` issues:\n\n    ```js\n    cy.get(\"html, body\").invoke(\n      \"attr\",\n      \"style\",\n      \"height: auto; scroll-behavior: auto;\"\n    );\n    ```\n\n- To resolve `sticky` issues\n\n    ```js\n    cy.get('header').invoke('css', 'position', 'relative')\n    cy.screenshot()\n    ```\n\n#### Videos\n\n- Enable Video output in `cypress.config.js`\n\n  ```js\n  {\n    video: true,\n  }\n  ```\n\n- Configure the video output directory:\n\n  ```js\n  {\n    videosFolder: 'logs/video',\n  }\n  ```\n\n@see \u003chttps://docs.cypress.io/guides/guides/screenshots-and-videos#Videos\u003e\n\n### Reporter\n\n- To output a 'junit' log file:\n\n  ```js\n  {\n    reporter: 'junit',\n    reporterOptions: {\n      mochaFile: 'logs/cypress-junit.xml',\n    },\n  }\n  ```\n\n## Plugins\n\n### TypeScript\n\n- Add TypeScript compiler\n\n    ```shell\n    npm install ts-node typescript -D\n    ```\n\n- Change `.js` files to `.ts`;\n\n- Configure `cypress/tsconfig.json`\n\n    ```json\n    {\n      \"compilerOptions\": {\n        \"target\": \"es5\",\n        \"lib\": [\n          \"es5\",\n          \"dom\"\n        ],\n        \"types\": [\n          \"cypress\",\n          \"node\"\n        ]\n      },\n      \"include\": [\n        \"**/*.ts\"\n      ]\n\n    }\n    ```\n\n- To help with IDE completion, add commands types to `cypress/support/index.ts`\n\n    ```js\n    // cypress/support/index.ts\n    declare global {\n      namespace Cypress {\n        interface Chainable {\n          /**\n           * Custom command to select DOM element by data-cy attribute.\n           * @example cy.dataCy('greeting')\n           */\n          dataCy(value: string): Chainable\u003cJQuery\u003cHTMLElement\u003e\u003e\n        }\n      }\n    }\n    ```\n\n@see \u003chttps://docs.cypress.io/guides/tooling/typescript-support\u003e\n\n### Cucumber\n\n- Install `cypress-cucumber-preprocessor`\n\n    ```bash\n    npm install @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor --save-dev\n    ```\n\n- Update `cypress.config.js` to include `feature` files\n\n    ```js\n    const { defineConfig } = require('cypress')\n\n    module.exports = defineConfig({\n      e2e: {\n        // Determines what filetypes are considered tests.\n        specPattern: 'cypress/e2e/**/*.{cy.js,cy.ts,feature}',\n        // Add Cucumber processor plugin.\n        async setupNodeEvents(\n          on: Cypress.PluginEvents,\n          config: Cypress.PluginConfigOptions,\n        ): Promise\u003cCypress.PluginConfigOptions\u003e {\n          // This is required for the preprocessor to be able to generate JSON reports after each run, and more,\n          await addCucumberPreprocessorPlugin(on, config)\n          on(\n            'file:preprocessor',\n            createBundler({\n              plugins: [createEsbuildPlugin(config)],\n            }),\n          )\n          // Make sure to return the config object as it might have been modified by the plugin.\n          return config\n        },\n      },\n    })\n    ```\n\n- Add `cucumber` to `./cypress/plugins/index.js`\n\n    ```javascript\n    const cucumber = require('cypress-cucumber-preprocessor').default\n\n    /**\n    * @type {Cypress.PluginConfig}\n    */\n    module.exports = (on, config) =\u003e {\n      on('file:preprocessor', cucumber());\n    }\n    ```\n\n## Tips\n\n### Iframes\n\n- Find the element\n\n```js\n// Find the specific iframe\ncy.get('iframe[name=\"my-iframe\"]').then(($iframe) =\u003e {\n  // Get it contents\n  const iframeContents = $iframe.contents()\n  // Create an alias for later usage\n  cy.wrap(iframeContents.find('form')).as('form')\n})\n```\n\n- Interact with the element\n\n```js\n// Prefix the alias name (as('form)) with @\ncy.get('@form').find('[name=\"name\"]').type('FirstName LastName')\n```\n\n### Network stubbing\n\n#### Return fixture results\n\n```js\ndescribe('Network Stubbing', () =\u003e {\n  beforeEach(() =\u003e {\n    // Intercept GET calls to the URL and replace with a fixture\n    cy.intercept('GET', 'https://api.example.com/users', {\n      fixture: 'users.json'\n    }).as('getUsers')\n  })\n\n  it('Visits a website that uses an external API', () =\u003e {\n    cy.visit('https://www.example.com')\n\n    // Wait for the AJAX call to finish and assert response\n    cy.wait('@getUsers').then(({ response }) =\u003e {\n      expect(response.statusCode).to.equal(200)\n      expect(response.body).to.have.length(2)\n      expect(response.body[0]).to.have.property('name', 'FirstName LastName')\n    })\n  })\n})\n```\n\n#### Dynamic\n\n```js\nit('Handles dynamic response', () =\u003e {\n  // Intercept the dynamic API route and respond with user data\n  cy.intercept('GET', '/api/users/*', req =\u003e {\n    req.reply({\n      statusCode: 200,\n      body: {\n        id: req.path.split('/')[3],\n        name: 'FirstName LastName',\n        email: 'fullname@example.com',\n        age: 30\n      }\n    })\n  }).as('dynamicApiRoute')\n\n  // Visit a website and wait for response from mocked API route\n  cy.visit('/')\n  cy.wait('@dynamicApiRoute')\n  // Assert that the response contains the correct user data\n  cy.get('@dynamicApiRoute')\n    .its('response.body')\n    .should('deep.equal', {\n      id: '1',\n      name: 'FirstName LastName',\n      email: 'fullname@example.com',\n      age: 30\n    })\n})\n```\n\n#### Handling errors\n\n```js\nit('Handles errors', () =\u003e {\n  // Intercept an API route that returns a 500 server error\n  cy.intercept('GET', '/api/error', {\n    statusCode: 500,\n    body: 'Internal Server Error'\n  }).as('errorRoute')\n\n  // Visit the website and wait for response from mocked API route\n  cy.visit('/')\n  cy.wait('@errorRoute').then(({ response }) =\u003e {\n    expect(response.statusCode).to.equal(500)\n    expect(response.body).to.equal('Internal Server Error')\n  })\n})\n```\n\n## GitHub Actions\n\n### Node Projects\n\nUse the following for Node Projects:\n\n  ```yaml\n  - name: '✅ Run Cypress'\n    if: ${{ !env.ACT }} # Skip if using local runner\n    uses: cypress-io/github-action@v6\n    with:\n      # Install npm dependencies, cache them correctly and run all Cypress tests\n      build: npm run build\n      start: npm start\n      # browser: chrome\n  ```\n\n### DDEV projects\n\nUse the following for DDEV-hosted projects:\n\n```yml\njobs:\n  e2e:\n  - name: '✅ Run Cypress'\n    runs-on: ubuntu-latest\n    steps:\n      - name: \"☁️ checkout repository\"\n        uses: actions/checkout@v4\n\n      - name: \"⚙️ Setup DDEV\"\n        uses: ddev/github-action-setup-ddev@v1\n\n      - name: \"⚙️ Setup Project\"\n        run: |\n          ddev composer install\n          ddev artisan migrate\n          ddev artisan key:generate\n\n      - name: \"✅ Cypress tests\"\n        run: ddev cypress-run | grep 'All specs passed'\n\n      - name: \"☁️ Archive Artifacts\"\n        uses: actions/upload-artifact@v4\n        with:\n          name: logs\n          path: |\n            logs\n```\n\n## Help\n\n### Element **not** exists\n\n```js\n// Text does not exist\ncy.contains('pinches of pepper')\n  .should('not.exist')\n// Element does not exist\ncy.get('.foo').should('not.exist')\n```\n\n### Environmental Variables\n\n- Add `cypress.env.json` to `.gitignore`\n- Any settings in `cypress.env.json` will override `cypress.json`\n\n```json\n{\n  \"user_name\": \"admin\",\n  \"user_password\": \"s3creT-p@ssw0rd\"\n}\n```\n\n```js\ndescribe('Login', () =\u003e {\n  it('successfully', () =\u003e {\n    cy.visit('https://example.com/login')\n\n    cy.get('#user').type(Cypress.env('user_name'))\n    cy.get('#password').type(Cypress.env('user_password'))\n    cy.contains('Login').click()\n  })\n})\n```\n\n### Basic authentication\n\n- Set the `baseUrl` to `http://username:password@site.local` // secretlint-disable-line\n\n## VScode\n\n### \"Marcosvfranco.cucumberautocomplete-behat\"\n\n[Homepage](https://marketplace.visualstudio.com/items?itemName=marcosvfranco.cucumberautocomplete-behat)\n\nSettings:\n\n```json\n    \"cucumberautocomplete.steps\": [\n  \"cypress/support/step_definitions/**/*.js\",\n],\n\"cucumberautocomplete.strictGherkinCompletion\": true,\n\"cucumberautocomplete.syncfeatures\": \"test/features/*feature\"\n```\n\n## Troubleshooting\n\n### \"Cypress: error while loading shared libraries: libnss3.so\"\n\n- [Install missing libraries](https://stackoverflow.com/questions/55835870/cypress-failed-to-start-on-ubuntu-linux)\n\n```bash\n# spell-checker: disable\nsudo apt-get update -y\nsudo apt-get install xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2\n# spell-checker: enable\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyler36%2Fcypress-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyler36%2Fcypress-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyler36%2Fcypress-demo/lists"}