Находите элементы в теневой модели DOM веб-компонентов непосредственно с помощью механизма запросов CSS.
В этом документе показано, как использовать более простой CSS / xPaths, который вызывает document.querySelector для поиска элементов в #shadow-root ваших веб-компонентов или Salesforce LWC приложений. Это решение можно расширить до LitElements, Lighting Fast Templates и т. Д.
Желание состоит в том, чтобы найти ваши #shadow-root элементы непосредственно через механизм запросов CSS (что вы не можете сделать с текущей реализацией WebDriver), например,
🔎 Если вы создаете свое приложение с помощью веб-компонентов или Salesforce’s LWC, и если вы попытаетесь использовать document.querySelector (в консоли), оно ничего не найдет в документе, хотя вы видите элемент в DOM браузера. Причина в том, что элементы веб-компонента находятся не в Main DOM, а скорее в Shadow DOM.
«Щит Shadow DOM становится головной болью для разработчиков при написании автоматических тестов интеграции / компонентов / E2E для веб-компонентов».
⚠️ ПРОБЛЕМА
Shadow DOM предотвращает легкое тестирование ваших компонентов на e2e из-за того, что обычные команды Selenium не работают из-за того, что элемент фактически не находится в основном документе. Скорее они инкапсулированы в Shadow DOM.
Selenium использует querySelector для поиска элемента; Теневые DOM предотвращают это.
Механизмы выбора, такие как css/xpath, по умолчанию не работают с теневой DOM.
Пример
Давайте посмотрим на chrome://download страницу. Он реализует Shadow DOM. Как вы видите, #searchInput - это элемент с ограниченной областью действия под #shadow-root (open), поэтому document.querySelector команде не удается найти элемент #searchInput,
Приведенный ниже запрос не может вернуть элемент, потому что #searchInput инкапсулирован в Shadow Dom,
и в результате приведенная ниже команда Selenium WebDriver также не сможет найти элемент ❎
Итак, что необходимо, так это очень сложный вложенный CSS [не рекомендуется] ↓
🤔 теперь представьте, вы добавляете еще один элемент во вложенный маршрут. Тогда вы неосознанно нарушаете тесты автоматизации. Вам нужно будет отслеживать и обновлять весь существующий вложенный CSS - что очень сложно !!
Могу ли я получить поддержку от WebDriver?
да. Фреймворк Codeceptjs-BDD предоставляет готовую поддержку для удобного поиска элементов Shadow DOM. Хотя существует существующий запрос функции для поддержки в W3C / Webdriver, но с помощью Codeceptjs-BDD Framework вы можете найти такие элементы, как document.query,
I.click('.any-shadow-elements-in-dom'); // no dom hierarchy
[..] большинство сред сквозного тестирования полагаются на [..] вызовы querySelector через CSS / xPaths. Элементы в Shadow DOM нельзя выбрать ни одним из них. Но у нас есть решение на уровне структуры.
🚀 РЕШЕНИЕ
Решением является реализация Codeceptjs-BDD Webdriver 🎉 🎉 🎉 , которая обеспечивает автоматическую поддержку Shadow DOM, а Playwright уже имеет встроенную поддержку.
Давайте поговорим о реальных сценариях, построенных с помощью фреймворка CodeceptJS!
Пример. Как видно в строке №6 на гифке ниже, при тестировании CSS довольно упрощен.
✅ Как вы видите в примере ниже, вам нужно просто определить очень простой #searchInput CSS. Драйвер Playwright найдет для вас элемент (ы). Не нужно упоминать ни о какой иерархии #shadow-roots!
🙌 Не требуется вложенный / сложный CSS!
Просто проверьте элемент в DOM и выберите уникальный атрибут. С Драматургом все так просто, потому что Драматург делает за нас остальную сантехническую работу.
Эксклюзивная поддержка WebDriver для Shadow Dom ⬇
✅ Рамочная документация: https://gkushang.github.io/
Демо-время
Давайте посмотрим на несколько реальных примеров со сценариями
Примеры в этом документе построены на фреймворке Codeceptjs-BDD с Playwright!
Полный пример теста
Как вы видите в приведенном выше примере, #searchInput является элементом с ограниченной областью видимости (# shadow-root), но он не требует наличия вложенного CSS #shadowRoots, чтобы найти элемент, но он все равно находит элемент!
Объект страницы LWC Salesforce, Еще один пример
Веб-компоненты Salesforce Lighting (LWC) - еще один отличный пример теневых элементов DOM. LWC Recipes построен с использованием LWC. Ниже приведен объект страницы о том, как запрашивать элементы Shadow DOM с помощью простого CSS.
Полный пример автоматизации E2E Приложение для веб-компонентов освещения Salesforce доступен здесь:
🎉 Codeceptjs-BDD упрощает автоматизацию веб-компонентов на любом из нижеперечисленных уровней тестирования автоматизации:
- Тесты компонентов
- Интеграционные тесты
- Функциональные тесты
- Тесты E2E
⭐️ Не забудьте ознакомиться с дополнительной документацией по Веб-сайту Codeceptjs-BDD framework и библиотеке CodeceptJS, чтобы узнать о дополнительных функциях🌈!
Спасибо за чтение, надеюсь, вы открыли для себя что-то новое и полезное. Оставайтесь любопытными и счастливого кодирования!
