{"id":16293251,"url":"https://github.com/noriste/frontend-testing-on-steroids","last_synced_at":"2025-04-05T16:32:58.971Z","repository":{"id":51395218,"uuid":"257183410","full_name":"NoriSte/frontend-testing-on-steroids","owner":"NoriSte","description":"Front-end Testing on Steroids - companion repo","archived":false,"fork":false,"pushed_at":"2021-05-12T06:48:20.000Z","size":411,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-29T19:49:04.221Z","etag":null,"topics":["cypress-io","testing-javascript"],"latest_commit_sha":null,"homepage":"https://slides.com/noriste/frontend-testing-on-steroids","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/NoriSte.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}},"created_at":"2020-04-20T05:45:35.000Z","updated_at":"2023-02-05T16:29:23.000Z","dependencies_parsed_at":"2022-09-17T13:25:28.058Z","dependency_job_id":null,"html_url":"https://github.com/NoriSte/frontend-testing-on-steroids","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/NoriSte%2Ffrontend-testing-on-steroids","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoriSte%2Ffrontend-testing-on-steroids/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoriSte%2Ffrontend-testing-on-steroids/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoriSte%2Ffrontend-testing-on-steroids/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NoriSte","download_url":"https://codeload.github.com/NoriSte/frontend-testing-on-steroids/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247367068,"owners_count":20927656,"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":["cypress-io","testing-javascript"],"created_at":"2024-10-10T20:10:38.638Z","updated_at":"2025-04-05T16:32:58.456Z","avatar_url":"https://github.com/NoriSte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-end Testing on Steroids\n\nWhy testing a front-end application is so hard? What are the main challenges you need to face? Why do the tests fail without a clear reason?\nThis talk is about good testing best practices and the tool that is become the de-facto standard of UI Testing: Cypress.\n\nPlease note: this is the spoken version of my [\"Some UI testing problems and the Cypress way\"](https://dev.to/noriste/some-ui-testing-problems-and-the-cypress-way-1167) article.\n\n## Talk walkthrough\n\n### 1 - Cypress works in the browser\n\nThere is not an orchestrating Bash script and an orchestrated browser, the tests work directly in the browser.\n\nTopics:\n\n- the Cypress Test List UI: allows easy test selection\n- the Cypress Test Runner UI: allows understanding what happens in the app and in Cypress\n- everything works in the browser: you do not need to go back and forth from the Bash to the browser\n- everything is logged inside the browser' console: you do not need to aggregate logs anymore\n- easier command understanding: less tools means more trivial understanding and debugging\n\nExamples:\n\n- logging from the test\n- logging from the app\n- accessing document.window' properties from the test\n- rich assertion results are logged too\n\n### 2 - Everything is async in UI testing\n\nEverything is asynchronous by definition in browserland\n\nTopics:\n\n- there are not sync/async differences, everything is async by definition\n- automatic waiting\n\nExamples:\n\n- retrieving and interacting with an element\n- asserting about an element visibility\n\n### 3 - Debugging\n\nDebugging is typically hard in E2E testing. Cypress comes to the rescue with a lot of first-class utilities.\n\nTopics:\n\n- tests can be paused and resumed later\n- the Cypress Test Runner allows time-travelling: you can analyze the DOM at every test step\n- tests have not timeouts, commands have: if something goes wrong, you discover it as soon as possible, without waiting for the while test timeout\n- DOM-related errors: when interacting with an element is not possible, Cypress tells you the reason why\n- automatic screenshot and videos: in case of failures, watching a video is easier than reading the log\n\nExamples:\n\n- pausing a test programmatically\n- time travelling in action\n- DOM-related errors with a fixed div all over the contents\n- checking failure video\n\n### 4 - UI Integration Tests\n\nE2E Testing is not so important due to its complexity. With full network stubbing, testing only the front-end application is easy and profitable.\n\nTopics:\n\n- full network stubbing\n- network error simulation\n\nExamples:\n\n- stubbing the wrong request: how a malformed stub could be detected with Cypress\n- stubbing the right request\n- happy path testing\n- edge case testing\n\n### Productivity\n\nCypress can be used not only as a development tool but as even as the main development browser.\n\nTopics:\n\n- automating manual interactions while developing\n- debugging with Chrome devtools\n- installing the React and Redux devtools\n\n### Bonus point\n\nTo leverage Cypress' full potential and have stable and useful tests there are a lot of UI Testing best practices.\n\nTopics:\n\n- retrieving elements by their contents: consuming the app the same way the user does is really important in order to have user-centered tests\n- AJAX request and response assertions: asserting about AJAX requests alleviates test failure debugging\n- clock management: long duration tasks could be fastly tested by controlling browser clock\n- running E2E tests just for the happy path: running a limited number of E2E tests saves you a lot of time\n\nExamples:\n\n- full UI Integration tests\n- full E2E tests\n\n---\n\n## About this repository\n\n- I bootstrapped this project with [create-react-app](https://facebook.github.io/create-react-app/docs/getting-started)\n- it contains a super-simple authentication form\n- it contains a fake server with artificial delays to simulate E2E testing slowness\n- all the code is well commented, with a lot of links to the slide explanations\n- I wrote the front-end app with a outside-in approach writing the acceptance test at the beginning.\n  I have not tested it manually at all!\n\n## How to play with it\n\nThere are four main commands:\n\n- `npm run start`: starts the (super simple) front-end app and the (fake) back-end app\n- `npm run cy:open`: opens the Cypress UI\n- `npm test`: launches both the front-end and the back-end apps, and runs cypress in the non-visual\n  mode. Remember killing the manually launched apps since it uses the same ports\n\n## How to read it\n\n- launch the front-end app and take a look at the `src/App.js` file\n- launch both the back-end app and Cypress\n- launch the `authentication.integration.test.js` in Cypress and watch it running\n- open the `cypress/integration/authentication.integration.test.js` and explore it\n- then, move to the `cypress/integration/authentication.e2e.test.js`\n- in the end: run the `npm test` command\n\n## UI Testing Best Practices book\n\nDo not forge to add a star to my (work in progress) [UI Testing Best\nPractices](https://github.com/NoriSte/ui-testing-best-practices) book on GitHub 😊\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoriste%2Ffrontend-testing-on-steroids","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoriste%2Ffrontend-testing-on-steroids","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoriste%2Ffrontend-testing-on-steroids/lists"}