Встроенная поддержка автоматизации для Shadow DOM — с помощью WebDriverIO и Cypress {Глава 3}

Последний этап битвы с Shadow DOM еще предстоит выиграть, поэтому будьте готовы справиться с ним изначально. После изучения предыдущих глав {chpater#1 Анатомия Shadow DOM и chpater#2 Поддержка W3C Webdriver для Shadow DOM} этой серии, теперь у нас есть прочные основы Shadow DOM. Итак, давайте выиграем последний этап и покорим Shadow DOM, используя несколько фреймворков с открытым исходным кодом.

Что нужно выбрать для Shadow DOM, если мы начинаем автоматизацию с нуля?
Если ваша команда по автоматизации тестирования хорошо знакома с JavScript, мы можем выбрать любой из следующих Node. Фреймворки на основе JS, потому что оба изначально поддерживают Shadow DOM.

WebdriverIO {оболочка поверх W3C Webdriver} framework v5.5.0+
Фреймворк Cypress v5.2.0+

Среда WebDriverIO поверх Shadow DOM
WebdriverIO версии 5.5.0 представила встроенную поддержку теневого DOM с помощью двух новых команд: shadow$ и shadow$$ :

shadow$ — Доступ к одному элементу внутри shadowRoot данного элемента.
shadow$$ — Доступ к более чем одному элементу внутри shadowRoot данного элемента.

В нашем тестовом приложении у нас есть многоуровневые теневые корни, поэтому нам нужно связать команды $ command и shadow $ настолько глубоко, насколько это необходимо. Прежде всего, с помощью команды $ мы будем обращаться к элементу Shadow Host, т.е. id=todo-app, затем с помощью команд shadow$ мы будем обращаться к элементам Shadow Root, т.е. id=adds-item, а затем id=enter-text-area. Для большей ясности взгляните на приведенный ниже скрипт и скриншот:

browser.$(‘#todo-app’).shadow$(‘#adds-item’).shadow$(‘#enter-text-area’);

В нашем скрипте мы выполним два действия над элементами Shadow DOM:

Введите текст внутри элемента‘enter-text-area’
Щелкните элемент ‘btn-enter’

// WebDriverIO JS code snippet - GitHub Repo
get inputTaskName () { return browser.$(‘#todo-app’).shadow$(‘#adds-item’).shadow$(‘#enter-text-area’); }
get enterButton () { return browser.$(‘#todo-app’).shadow$(‘#adds-item’).shadow$(‘.btn-enter’); }
enterTodayTaskName (todayTaskName) {
  this.inputTaskName.setValue(todayTaskName);
  this.enterButton.click();
}

Среда Cypress поверх Shadow DOM
Cypress v5.2.0 представила встроенную поддержку теневого DOM с помощью команды shadow(selector), которая переходит в Shadow DOM для поиска элемента:

shadow() — Переход в теневой DOM элемента

В нашем тестовом приложении у нас есть многоуровневые теневые корни, поэтому нам нужно связать метод shadow() настолько глубоко, насколько это необходимо. Прежде всего, с помощью метода get() мы будем обращаться к элементу Shadow Host, т.е. id=todo-app, затем с помощью метода shadow() мы будем обращаться к элементам Shadow Root, т.е. id=adds- item, а затем id=enter-text-area. Для большей ясности взгляните на приведенный ниже код и скриншот:

cy
.get(‘#todo-app’)
.shadow().find(‘#adds-item’)
.shadow().find(‘#enter-text-area’);

// Cypress JS code snippet - GitHub Repo
describe(‘Example to demonstrate the handling of Shadow Dom in Cypress’, () => {
before(() => {
  cy.visit(‘http://localhost:3000/')
  })
it(‘Input a text in the plan box and add it to todays list’, () => {
  cy.get(‘#todo-app’)
    .shadow().find(‘#adds-item’)
    .shadow().find(‘#enter-text-area’)
    .type(‘Shadow DOM’)
  cy.get(‘#todo-app’)
    .shadow().find(‘#adds-item’)
    .shadow().find(‘.btn-enter’)
    .click()
  })
})

📍📍 Особый случай — Что, если Shadow DOM находится внутри iFrame? Обработка будет такой же, но Webdriver должен переключить контекст, прежде чем предпринимать какие-либо действия с элементами Shadow DOM iFrame.

Ключевые выводы

Осведомлен о фреймворках на основе JS, которые изначально поддерживают Shadow DOM.
Познакомился с нативной обработкой Shadow DOM с помощью WebDriverIO.
Более известная встроенная обработка Shadow DOM с помощью WebDriverIO.
Понятно — обработка Shadow DOM, если они находятся внутри iFrame.

Итак, пришло время опустить занавес — на этом серия автоматизации Shadow DOM заканчивается. Давайте запачкаем руки Shadow DOM и его элементами!!

Для дальнейшего обсуждения или любых сомнений — прокомментируйте ниже и начните открытое сотрудничество над Shadow DOM👍👍👍👍

Встроенная поддержка автоматизации для Shadow DOM — с помощью WebDriverIO и Cypress {Глава 3}

Вопросы по теме