{"id":20617989,"url":"https://github.com/applitools/workshop-cbt-cypress","last_synced_at":"2025-04-15T11:36:53.193Z","repository":{"id":51741561,"uuid":"451668717","full_name":"applitools/workshop-cbt-cypress","owner":"applitools","description":"Workshop: Modern Cross-Browser Testing with Cypress","archived":false,"fork":false,"pushed_at":"2022-02-03T22:41:10.000Z","size":14690,"stargazers_count":8,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T19:38:02.680Z","etag":null,"topics":["applitools","cross-browser-testing","cypress","cypress-io","javascript","mocha","testing","visual-ai","visual-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/applitools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-24T23:29:46.000Z","updated_at":"2022-08-02T17:48:41.000Z","dependencies_parsed_at":"2022-08-22T15:51:50.302Z","dependency_job_id":null,"html_url":"https://github.com/applitools/workshop-cbt-cypress","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fworkshop-cbt-cypress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fworkshop-cbt-cypress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fworkshop-cbt-cypress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fworkshop-cbt-cypress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/applitools","download_url":"https://codeload.github.com/applitools/workshop-cbt-cypress/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249061710,"owners_count":21206546,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["applitools","cross-browser-testing","cypress","cypress-io","javascript","mocha","testing","visual-ai","visual-testing"],"created_at":"2024-11-16T12:06:44.467Z","updated_at":"2025-04-15T11:36:53.161Z","avatar_url":"https://github.com/applitools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Cross Browser Testing with Cypress](images/cbt-cypress-banner.png)\n\n# Modern Cross-Browser Testing with Cypress\n\nThis repository contains the example code for the\n[Modern Cross-Browser Testing with Cypress](http://applitools.info/qjg) workshop\nled by [Pandy Knight](https://twitter.com/AutomationPanda)\nand hosted by [Applitools](https://applitools.com/).\n\nFull instructions for the workshop are provided in [`WORKSHOP.md`](WORKSHOP.md).\n\n\n## Abstract\n\nAs organizations double down on digital, the concept of quality has evolved from “does it work” to “is it the best experience” – but the race to deliver innovation to market faster than the competition is causing challenges for software teams.\n\nMore frequent releases multiplied by an explosion of device/browser combinations and increased application complexity have exponentially increased the number of screens that need to be validated each cycle – an industry average of 81,480 screens to 681,296 for the top 33% – and traditional test automation can’t keep up.\n\nIn this 1-hour workshop, “Automation Panda” Andrew Knight will explain how to create ultrafast automated cross-browser tests using JavaScript with Cypress – one of the most popular open-source end-to-end test frameworks – and integrate them into CI/CD to provide feedback on quality across all browser/device combinations in seconds.\n\nHighlights:\n\n* The importance and evolution of cross-browser testing \n* Critical requirements for a scalable cross-browser testing initiative and pros/cons of different approaches \n* How to accelerate cross-browser / cross-device testing for integration into CI/CD using JavaScript with Cypress\n\n\n## Outline\n\n1. Traditional cross-browser testing\n   1. Writing a typical login test\n   2. Running the test locally\n   3. Running the test against multiple browsers\n   4. Scaling out cross-browser testing yourself\n   5. Scaling out cross-browser testing as a service\n2. Modern cross-browser testing\n   1. Reconsidering what should be tested\n   2. Introducing Applitools Ultrafast Grid\n   3. Rewriting login as a visual test\n   4. Running visual tests across multiple browsers\n   5. Integrating modern cross-browser testing with CI/CD\n\n\n## Prerequisites\n\nTo complete this workshop, you will need:\n\n1. An Applitools account\n   * Register [here](https://auth.applitools.com/users/register) for a free account\n2. [Node.js](https://nodejs.org/en/)\n   * This project was created with v16.13.1\n3. A JavaScript IDE like [Visual Studio Code](https://code.visualstudio.com/docs/languages/javascript)\n4. Up-to-date versions of the following browsers:\n   * [Google Chrome](https://www.google.com/chrome/)\n   * [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/)\n   * [Microsoft Edge](https://www.microsoft.com/en-us/edge)\n\n\n## Architecture\n\nThis project is a small JavaScript test automation project\ncontaining [Cypress](https://www.cypress.io/) test cases\nfor an [Applitools demo site](https://demo.applitools.com).\nEach test case covers the same login behavior, but they do so in different ways:\n\n1. `traditional.spec.js` covers login using traditional assertions on a local machine.\n2. `visual.spec.js` covers login using Visual AI with [Applitools Eyes](https://applitools.com/products-eyes/)\n   and [Ultrafast Grid](https://applitools.com/product-ultrafast-test-cloud/).\n\n\n## Running tests\n\nTo launch tests,\nrun `npx cypress open` to launch the Cypress browser window (good for developing),\nor run `npx cypress run` to execute tests purely from the command line (good for CI/CD).\n\nBefore running the visual test, \nyou must set the `APPLITOOLS_API_KEY` OS environment variable to your Applitools API key\nso that the test can connect to the Applitools cloud.\n\nThere are also two versions of the demo site under test:\n\n1. The *original* version of the site\n2. A *changed* version of the site with visual differences\n\nTo control which version to test, set the `DEMO_SITE`\n[Cypress environment variable](https://docs.cypress.io/guides/guides/environment-variables)\nto `original` or `changed`.\n\nThis project also provides a number of npm scripts to make launch commands simpler:\n\n* `npm run cypress` - opens the Cypress browser window\n* `npm run cypress:original` - opens the Cypress browser window to test the original site\n* `npm run cypress:changed` - opens the Cypress browser window to test the changed site\n* `npm test` - executes tests from the command line\n* `npm run test:original` - executes tests against the original site\n* `npm run test:changed` - executes tests against the changed site\n* `npm run test:chrome` - executes tests using Google Chrome\n* `npm run test:edge` - executes tests using Microsoft Edge\n* `npm run test:firefox` - executes tests using Mozilla Firefox\n\nThese commands run both the traditional and visual tests.\nTo run one test, append `-- --spec \"\u003cpath\u003e\"` to the command.\nFor example, `npm run test:changed -- --spec \"cypress/integration/visual.spec.js\"`\nruns the visual test against the changed site purely from the command line.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapplitools%2Fworkshop-cbt-cypress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapplitools%2Fworkshop-cbt-cypress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapplitools%2Fworkshop-cbt-cypress/lists"}