Подсветка веб-элементов в Selenium, Playwright и Cypress

Подсветка изменением стиля

Видел в Линкедине пост о том как выделить веб-элемент и сделать скриншот страницы с помощью тест-раннеров Selenium и Playwright.

Selenium-тест с выделением элемента и сохранением скриншота
Selenium-тест с выделением элемента и сохранением скриншота

Другой человек сделал похожее в Playwright:

Тест в Playwright с выделением элемента и сохранением скриншота
Тест в Playwright с выделением элемента и сохранением скриншота

В обоих случаях мы выделяем элемент, изменяя его стиль. Можно сделать такое выделение на любой странице, просто открыв DevTools и изменив style-объект нужного элемента.

Смотрите, как я настраиваю границы поля ввода в отличном (но малопопулярном) поисковике Ecosia:

Выделяю поле ввода красным цветом из DevTools
Выделяю поле ввода красным цветом из DevTools

В Cypress

Как я это делаю в Cypress.

cypress/e2e/spec.cy.js :

it('highlights the input element', () => {
  cy.visit('/')
  cy.get('input[aria-label="Search the web"]').then(($el) => {
    $el[0].style.border = '3px solid red'
  })
  cy.screenshot('input-highlighted', {
    overwrite: true,
    clip: { x: 0, y: 0, width: 1200, height: 1000 },
  })
})
Сохраненный скриншот
Сохраненный скриншот

🎁 Полный код — в моем репозитории bahmutov/highlight-element-example.

Несколько замечаний об этом тесте: 

  • Базовый url задается в файле cypress.config.js, поэтому в тесте я могу просто зайти на корень командой cy.visit('/') 
  • Команды запросов в Cypress (типа cy.get) выдают jQuery-объект, если элемент найден. Здесь я просто использовал DOM-элемент $el[0].style = ... 
  • Я обрезал скриншот, полученный командой cy.screenshot, потому что домашняя страница Ecosia очень большая, а нам сейчас интересен только этот элемент ввода.

Выполнение кода в браузере

Раннер Cypress имеет особенности. Тесты в Selenium и Playwright выполняются в окружении Node.js, отправляя команды «получить элемент», «снять  скриншот» в браузер по определенному протоколу. 

А тесты в Cypress запускаются внутри браузера. Таким образом, тебе не нужно «инжектировать» JavaScript, который посылает строки кода из Node.js. Даже можно использовать локальные переменные, регистрировать коллбэки и т. д. — это все делается из теста. Не нужно преобразование типов аргументов, не нужна сериализация.

// нормальный тестовый код Cypress, тоже работает
const border = '3px solid red'
cy.get('input[aria-label="Search the web"]').then(($el) => {
  $el[0].style.border = border
})

jQuery

Cypress по умолчанию «заворачивает» все найденные элементы в объект jQuery. Это упрощает применение многочисленных методов jQuery работы с элементами DOM. Например, можно задать сразу несколько CSS-свойств:

const border = '3px solid red'
cy.get('input[aria-label="Search the web"]').then(($el) => {
  $el.css({
    background: 'yellow',
    border,
  })
})
Элемент ввода с несколькими CSS-свойствами, установленными из теста
Элемент ввода с несколькими CSS-свойствами, установленными из теста

Fluent chain

В приведенном выше тесте мы получаем элемент, который тест передает следующей команде:

cy.get(...)
  .then($el => {
    $el.css(...)
  })

Внутри коллбэка cy.then тест вызывает метод «css» — и всё. Можно вызывать метод по его имени и передавать аргументы встроенной командой Cypress cy.invoke.

const border = '3px solid red'
cy.get('input[aria-label="Search the web"]').invoke('css', {
  background: 'yellow',
  border,
})

Работает точно так же. 

Это прекрасно, потому что в Cypress есть типы TypeScript — и когда я пишу cy.get(...).invoke(...), редактор кода подхватывает доступные методы jQuery, которые можно вызвать по этому объекту.

IntelliSense
IntelliSense

Чудесно, да? 

Сравнение

Так какое решение лучше?

Выделение элемента DOM и сохранение скриншота страницы с помощью Selenium, Playwright и Cypress
Выделение элемента DOM и сохранение скриншота страницы с помощью Selenium, Playwright и Cypress

А также

Написал небольшой плагин cypress-highlight:

// Выделить все элементы с тестовыми атрибутами
import { highlight } from 'cypress-highlight'

it('loads an app', () => {
  cy.visit('/')
  highlight()
})

//  Выделить только нужные селекторы
highlight('[data-test-id]', '.testable')

Глеб Бахмутов — VP of Engineering в Cypress.io


Какой была ваша первая зарплата в QA и как вы искали первую работу?

Мега обсуждение в нашем телеграм-канале о поиске первой работы. Обмен опытом и мнения.

Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Мы в Telegram

Наш официальный канал
Полезные материалы и тесты
Готовимся к собеседованию
Project- и Product-менеджмент

? Популярное

? Telegram-обсуждения

Наши подписчики обсуждают, как искали первую работу в QA. Некоторые ищут ее прямо сейчас.
Наши подписчики рассказывают о том, как не бояться задавать тупые вопросы и чувствовать себя уверенно в новой команде.
Обсуждаем, куда лучше податься - в менеджмент или по технической ветке?
Говорим о конфликтных ситуациях в команде и о том, как их избежать
$1100*
медианная зарплата в QA в июне 2023

*по результатам опроса QA-инженеров в нашем телеграм-канале

Собеседование

19%*
IT-специалистов переехало или приняло решение о переезде из России по состоянию на конец марта 2022

*по результатам опроса в нашем телеграм-канале

live

Обсуждают сейчас