Cypress – пошук елементів в Selector Playground

Selector Playground – це вбудований в Cypress інструмент, для пошуку та створення селекторів для елементів.

Для прикладу я буду використовувати специфікацію, створену під час написання нотатки:

Cypress – приклад створення першого end-to-end тесту

describe('Todomvc test', () => {
  it('Add one todo', () => {
    cy.visit('https://todomvc.com/examples/react/#/')
    cy.get('.new-todo').type('simple todo{enter}')
    cy.get('.view label').should('have.text', 'simple todo')
  })
})

Тест відкриває сторінку Todo блокнота, додає один запис, та перевіряє текст щойно доданого запису.

Переходжу в директорію з проектом, та відкриваю додаток Cypress командою npx cypress open, переходжу в Test Runner та запускаю тест:

По завершенню тесту, перебуваючи в Test Runner, в частині з відображенням сторінки що тестується, клікаю на значок поруч з полем URL:

Тепер при наведенні на елемент мишею, у спливаючій підказці можна побачити унікальний селектор для елемента:

Якщо клікнути на елемент, то буде згенеровано код для методу cy.get разом з селектором, котрий можна скопіювати та підставити в тест:

В цьому ж рядку, є можливість писати селектори вручну, та перевіряти знайдені співпадіння на сторінці.

Ще одна можливість Selector Playground, перевірка функції cy.contains для отримання елемента по тексту. Для цього потрібно у перемикачі обрати cy.contains:

Після цього, з’являється можливість переглядати елементи, які відповідають заданому тексту:

Документація по функціоналу Selector Playground на офіційній сторінці Cypress:

Cypress App Selector Playground

Мітки: