Download to read offline
![PREFER DATA-CY SELECTORS
The custom data-cyattribute can be added to any
element(s) of your choice!
data-cyhas no effect
on the HTML elements
it’s added to
We only add it to use it
for selecting elements
in Cypress tests
via [data-cy="value"]
Therefore, you, the developer, can guarantee it’s not going to be removed
or broken because of non-test-related code changes](https://image.slidesharecdn.com/cypress-e2e-course-slides-240611052953-18fd5561/75/cypress-course-slides-e2e-automatic-testing-pptx-8-2048.jpg)
![[English][Test Girls] Zero to Hero: Start Test automation with Cypress](https://cdn.slidesharecdn.com/ss_thumbnails/entestgirlstestingwithcypress-191024022807-thumbnail.jpg?width=640&height=640&fit=bounds)
cypress course slides e2e automatic testing .pptx
- 1. WHAT IS CYPRESS? TestAutomation Tool & Framework (for websites)
- 2. USE CYPRESS FORAUTOMATED TESTING Component Tests Test complete application flows e.g., user authentication flow Test individual UI elements e.g., a modal overlay component This Course End-to-End (E2E) Tests
- 3. WHAT IS END-TO-END(E2E) TESTING? Test application workflows from end to end User visits page Enters text Clicks button Todo item is added User visits “Login” page Enters credentials Submits form Views dashboard
- 4. E2E VS UNITTESTING Unit Testing E2E Testing Test small app building blocks e.g., an individual function Ensures correct functionality of individual units Does not guarantee functionality of overall system Test complete application workflows e.g., login flow Ensures correct functionality of core app features & processes Does not necessarily cover all building blocks of an app
- 5. FUNDAMENTALS & BASICS How towrite E2E tests with Cypress Finding Page Elements Simulating User Interaction Writing Assertions & Evaluating Tests
- 6. MODULE SUMMARY Setup &Adding Tests npm install cypress npx cypress open Store tests (it()) in suites (describe()) Adding Steps / Commands Use the cyobject to define the executable steps Commands / queries can be chained Expectations / Assertions Many queries have built-in assertions (e.g., get()) Add explicit assertions via should() Simulating User Interaction Use actions like click() or type() Add as many assertions as needed to test different flow states Selecting Elements Select elements via CSS with get()+ find() Select by text via contains()
- 7. DEEP DIVE: SELECT,ACT, ASSERT A closer look at element selection, actions &assertions Select & Use Elements Efficiently More Actions & Testing Page Navigations More on Assertions & should()
- 8. PREFER DATA-CY SELECTORS Thecustom data-cyattribute can be added to any element(s) of your choice! data-cyhas no effect on the HTML elements it’s added to We only add it to use it for selecting elements in Cypress tests via [data-cy="value"] Therefore, you, the developer, can guarantee it’s not going to be removed or broken because of non-test-related code changes
- 9. SELECTING WITH DATA-CY get('data-cy="my-element"') <p>Helloworld!</p> <p data-cy="my-element">Selected</p> <li data-cy="my-element">Item 1</li> <li data-cy="my-element">Item 2</li> <li data-cy="my-element">Item 3</li> All three items are selected Only second paragraph is selected Selections are stable, even as elements are moved around or CSS classes or element IDs are changed
- 10. DANGEROUS SELECTORS get('header a') <header> <ahref="/about">About</a> </header> ... <section> <header> <a href="#next”>Go to next section</a> </header> </section> Two matching <a> elements are selected! ! Problem
- 11. DANGEROUS SELECTORS get('header a') <nav> <ahref="/about">About</a> </nav> ... <section> <header> <a href="#next”>Go to next section</a> </header> </section> The target element is no longer selected (only the wrong one) ! Problem
- 12. BEST PRACTICE: PREFER DATA-CY Preferdata-cy to avoid unwanted test failures because of DOM changes!
- 13. MODULE SUMMARY Selecting Elements Preferthe data-cy attribute selector It’s less error-prone than other selectors Use Aliases Get Element Access Use then()for more direct element access Re-use query results via aliases Create & use aliases via as(‘name’)& ‘@name’ Different Assertion Approaches should()vs expect() Some should()s yield new subjects
- 14. TEST ORGANIZATION & CONFIGURATION BeingEfficient Configuring Tests & Timeouts Sharing Logic & Setup Steps Across Tests Custom Commands & Queries
- 15. COMMANDS VS QUERIES Queries Commands Re-usable“shortcuts” for more complex command chains e.g., cy.submitForm() could be a custom command that finds the submit button in a form and clicks it Synchronous, chainable, retriable commands e.g., cy.getById(‘abc’) could be a custom query that finds elements with data- cy=“abc”
- 16. EXECUTING TASKS Tasks thatshould run outside of the browser Examples: Empty or delete a file, seed a database
- 17. MODULE SUMMARY Hooks before(), beforeEach() Testpreparation or cleanup Tasks Allow you to run code outside of the browser Example: Seed database, store data in files, … Cypress Configuration Global & local (test- or suite-specific) e.g., set timeout values, browsers, baseUrl & more Custom Commands & Queries Outsource shared logic & command combinations Don’t overuse these features!
- 18. SPIES, STUBS & FIXTURES AdjustingTesting Conditions Understanding Spies, Stubs & Fixtures Using Spies, Stubs & Fixtures Manipulating the Clock
- 19. SPIES &STUBS Spy Stub Alistener that’s attached to a function / method Used for evaluating / asserting function calls Does not change or replace the function! A replacement for an existing function / method Used for evaluating & controlling function calls Does replace the function!
- 20. ONLY TEST YOUR APPLICATION Whatshould your tests evaluate? Your Application Browser APIs 3rd Party APIs & Libraries
- 21. MODULE SUMMARY Stubs &Spies Stubs: Replace existing methods Spies: Add listeners to existing methods Fixtures Store dummy testing data in central place Access via fixture()and use in your tests Manipulating the Clock Use cy.clock()to manipulate the clock Then use cy.tick() to advance time
- 22. NETWORK REQUESTS, DATABASES &AUTH •Dealing with the Tricky Parts • Handling HTTP Requests in E2E Tests Using a Testing Database • Simulating Authentication Flows
- 23. DEALING WITH NETWORK REQUESTS AllowIntercept Trigger Manually Let the website do its requests Potential problem: Database is hit with test data Solution: Use a separate testing database Intercept + spy: Request passes & you can spy on it Intercept + stub: Request is blocked & stub response is used Test API endpoints from inside your tests Ideal for API testing or for decoupling frontend & backend
- 24. MODULE SUMMARY Network Requests Canbe intercepted (and blocked) Manually trigger requests for API testing Test Database Should be used when hitting the database Ensures test isolation & avoids breaking live data Authentication Nothing special in general Custom commands simplify your auth- dependent tests
- 25. YOU DID IT! You nowhave a solid understanding of the core Cypress concepts Use Cypress in your own projects Read the official docs Explore the Cypress “Real World App”