Gain insights into Cypress, a fast, reliable testing tool. Discover its basics, create robust test cases, and enhance front-end quality with advanced concepts and accessibility integration.

Frontend End-to-End Testing with Cypress.png

Cypress.tar.gz

Cypress

CypressGUI

Cypress, an end-to-end testing framework, has become a popular choice among front-end developers to test their applications with a fast, easy-to-use, and reliable testing tool. It allows you to test your applications with a fast, easy-to-use, and reliable testing tool. It can help you improve your site by capturing bugs before they reach production.

In this course, you'll start off with the basics of Cypress, learn why Cypress is a great choice, how it works, and how you can create robust test cases with its help. In this course, you'll start off with the basics of Cypress, learn why it is a great choice, how it works, and how we can create robust test cases. We will also ensure that our site is usable by the widest possible audience by integrating Axe by Deque, an accessibility engine.

By the end of this course, you'll have a solid foundation to enhance the quality of your front-end application and learn more advanced concepts to take your E2E testing to the next level.

Frontend End-to-End Testing with Cypress

# A Short Introduction to Cypress

1. GitHub Repository: https://github.com/cypress-io/cypress

---

# Who Should Use Cypress?

1. The mission of Cypress: https://docs.cypress.io/guides/overview/why-cypress.html#Our-mission
2. Cypress Documentation: https://docs.cypress.io/
3. Official Roadmap: https://docs.cypress.io/guides/references/roadmap
4. Cypress on Twitter: https://twitter.com/cypress_io

---

# What Makes Cypress Different?

1. Mocha: https://mochajs.org/
2. Mocha's Async Support: https://mochajs.org/#asynchronous-code
3. ChaiJS: http://chaijs.com/
4. Chai-jQuery: https://github.com/chaijs/chai-jquery
5. Sinon.js: https://sinonjs.org/
6. `Cypress.sinon`: https://docs.cypress.io/api/utilities/sinon
7. `cy.stub`: https://docs.cypress.io/api/commands/stub
8. `cy.spy`: https://docs.cypress.io/api/commands/spy
9. Sinon-Chai: https://github.com/cypress-io/sinon-chai
10. Lodash: https://lodash.com/
11. jQuery: https://jquery.com/
12. Minimatch: https://github.com/isaacs/minimatch
13. Blob-util: https://github.com/nolanlawson/blob-util
14. Bluebird: https://github.com/petkaantonov/bluebird
15. Selenium: https://www.selenium.dev/
16. Cypress Dashboard: https://www.cypress.io/dashboard/
17. Dashboard Pricing: https://www.cypress.io/pricing
18. Alter Network Requests: https://docs.cypress.io/guides/guides/network-requests

---

# The Testing Approach

1. `cy.intercept` command: https://docs.cypress.io/api/commands/intercept
2. `cy.clock` command: https://docs.cypress.io/api/commands/clock
3. Open issues on GitHub: https://github.com/cypress-io/cypress/issues
4. Roadmap: https://docs.cypress.io/guides/references/roadmap#Upcoming-features
4. Lack of hover command: https://docs.cypress.io/api/commands/hover

---

# Time Travel

1. `debugger` keyword: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

---

# Spies, Stubs, and Clocks

1. Promises documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
2. Sino-Chai GitHub: https://github.com/domenic/sinon-chai
3. Sinon-Chai assertions: https://docs.cypress.io/guides/references/assertions#Sinon-Chai
4. `Date` object documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
5. `setTimeout` documentation: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
6. `setInterval` documentation: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

---

# Consistent Results

1. Other factors of flakes: https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Visibility

---

# Cross-Browser Testing

1. Global browser market share: https://gs.statcounter.com/browser-market-share
2. Support for cross-browser testing: https://github.com/cypress-io/cypress/issues/310
3. All available arguments for `cy.screenshot`: https://docs.cypress.io/api/commands/screenshot#Arguments

---

# Setting Up a New Project

1. Node download page: https://nodejs.org/en/download/
2. Cypress direct download: https://download.cypress.io/desktop

---

# Fixtures and Integration

1. HTTP status codes: https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml

---

# Configuration

1. Available configuration options: https://docs.cypress.io/guides/references/configuration#Options
2. Option that can be changed for test files: https://docs.cypress.io/guides/references/configuration#Cypress-config

---

# Interacting with Elements

1. List of available special type commands: https://docs.cypress.io/api/commands/type#Arguments
2. All available DOM events: https://developer.mozilla.org/en-US/docs/Web/API/Element#events

---

# Why Accessibility is Important?

1. Official documentation of WAI-ARIA: https://www.w3.org/WAI/standards-guidelines/aria/
2. Axe, the accessibility engine: https://www.deque.com/axe/
3. WCAG: https://www.w3.org/WAI/standards-guidelines/wcag/
4. Axe DevTools: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
5. Axe core GitHub repository: https://github.com/dequelabs/axe-core
6. NPM package for Cypress Axe: https://www.npmjs.com/package/cypress-axe
7. NPM package for Axe core: https://www.npmjs.com/package/axe-core

---

# Checking Accessibility

1. Custom options for running Axe: https://www.deque.com/axe/core-documentation/api-documentation/#parameters-axerun
2. List of available options for customizing runs: https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter

---

# The Test Runner

1. Support for Cypress: https://www.cypress.io/support/
2. Docs on Why Cypress: https://docs.cypress.io/guides/overview/why-cypress
3. Changelog: https://docs.cypress.io/guides/references/changelog
4. Cypress Dashboard: https://www.cypress.io/dashboard/
5. Selector playground: https://docs.cypress.io/guides/core-concepts/test-runner#Selector-Playground

You can find all of the references here, broken down by the name of the lesson.

What is Cypress?

Why Cypress?

How Cypress Works

The Features of Cypress

The Structure of Cypress

Writing Your Very First Test Case

Integrating Axe

Running Your Test Cases

Debugging Cypress

What's Next?

Appendix

Resources

A Short Introduction to Cypress

Who Should Use Cypress?

What Makes Cypress Different?