PITCHME.md

☀️ Part 3: Selector playground

📚 You will learn

• Cypress Selector Playground tool
• best practices for selecting elements
• Cypress Studio for recording tests

+++

• keep todomvc app running
• open 03-selector-playground/spec.js

---

How do we select element in cy.get(...)?

• Browser's DevTools can suggest selector

+++

+++

Open "Selector Playground"

+++

Selector playground can suggest much better selectors.

+++

⚠️ It can suggest a weird selector

+++

Read best-practices.html#Selecting-Elements

+++

Todo

• add test data ids to todomvc/index.html DOM markup
• use new selectors to write cypress/integration/03-selector-playground/spec.js

// fill the selector, maybe use "tid" function
cy.get('...').should('have.length', 2)

Note: The updated test should look something like the next image

+++

+++

Cypress is just JavaScript

import { selectors, tid } from './common-selectors'
it('finds element', () => {
  cy.get(selectors.todoInput).type('something{enter}')

  // "tid" forms "data-test-id" attribute selector
  // like "[data-test-id='item']"
  cy.get(tid('item')).should('have.length', 1)
})

---

Cypress Studio

Record tests by clicking on the page

{
  "experimentalStudio": true
}

Watch 📹 Record A Test Using Cypress Studio and read https://on.cypress.io/studio.

+++

Start recording

---

🏁 Selecting Elements

• Use Selector Playground
• follow https://on.cypress.io/best-practices#Selecting-Elements
• bonus: try @testing-library/cypress

+++

🏁 Quickly write tests

• pick elements using Selector Playground
• record tests using Cypress Studio

➡️ Pick the next section or jump to the 04-reset-state chapter