Рубрики
Без рубрики

Как Обрабатывать Псевдоэлементы В CSS С Помощью Selenium?

Выполняя тестирование автоматизации пользовательского интерфейса на веб-странице, мы все стараемся работать с такими веб-элементами, как… С тегами java, javascript, selenium, css.

  • Автор записи Автор: admin
  • Дата записи 04.09.2021

Выполняя тестирование автоматизации пользовательского интерфейса на веб-странице, мы все стараемся работать с веб-элементами, такими как кнопки, тексты и т.д. Взаимодействие с веб-элементами в КУПОЛЕ стало возможным с помощью Локаторов селена . Однако на веб-странице есть определенные элементы, с которыми не могут справиться даже локаторы. Псевдоэлементы в CSS попадают в эту категорию. Без правильной информации эти псевдоэлементы может быть очень сложно автоматизировать. В этой статье мы увидим, как обрабатывать псевдоэлементы в CSS с помощью Selenium WebDriver.

Selenium – это мощная платформа автоматизированного тестирования для проверки сложных веб-страниц, но псевдоэлементы сложно автоматизировать. Selenium, при использовании в сочетании с интерфейсом JavascriptExecutor, помогает автоматизировать псевдоэлементы. При тестировании вашего веб-сайта необходимо также убедиться, что веб-страница функционирует должным образом в различных сочетаниях браузеров и ОС. Учитывая, что автоматизация тестирования Selenium является кросс-браузерной и кроссплатформенной задачей, вы можете выполнять тесты автоматизации в масштабе с помощью облачной сетки Selenium.

Что такое псевдоэлементы в CSS?

Сочетание двух слов – псевдо и элементы – часто может привести к недопониманию, поэтому давайте разберемся, что именно представляют собой псевдоэлементы в CSS (Каскадная таблица стилей).

При использовании CSS для любого веб-элемента мы обычно применяем к нему стиль. Но что, если мы хотим применить стиль только к определенной его части, а не к полному элементу. Я знаю, о чем ты думаешь.

И ответ – ДА. Это возможно с помощью псевдоэлементов. Псевдоэлементы – это компонент CSS, используемый для стилизации определенных частей веб-элемента. Эти псевдоэлементы можно использовать для применения CSS к части или определенной части веб-элемента, например:

  • Применение CSS к первой букве элемента
  • Применение CSS в первой строке элемента
  • Вставка некоторого текста перед текстом элемента
  • Вставка некоторого текста после текста элемента

Псевдоэлементы определяются с помощью двойного двоеточия (::), как показано в приведенном ниже синтаксисе:

selector::pseudo-element {
  property: value;
}

Распространенные типы псевдоэлементов в CSS

Прежде чем приступить к работе с псевдоэлементами в Selenium, давайте сначала рассмотрим некоторые часто используемые типы псевдоэлементов в CSS.

Псевдоэлемент::первой строки

Как следует из названия, псевдоэлемент::первой строки в CSS используется для добавления специального стиля CSS только в первую строку текста и может применяться только к элементам уровня блока.

Синтаксис:

selector::first-line {
  property: value;
}

Псевдоэлемент в примере CSS:::псевдоэлемент первой строки

Рассмотрим приведенный ниже HTML-код:






    




    
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
    





{"mode":"full","isActive":false}

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый зеленый цвет (#00ff00) применяется только к первой строке элемента , и это возможно только с помощью::псевдоэлемента первой строки.

Псевдоэлемент::из первой буквы

Как следует из названия, псевдоэлемент::первая буква в CSS используется для добавления специального стиля CSS только к первой букве текста и может применяться только к элементам уровня блока.

Синтаксис:

selector::first-letter {
  property: value;
}

Псевдоэлемент в примере CSS:::псевдоэлемент из первой буквы

Рассмотрим приведенный ниже HTML-код:






    




    
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый зеленый цвет (#00ff00) применяется только к первой букве элемента и это возможно только с помощью::псевдоэлемента с первой буквой. и это возможно только с помощью::псевдоэлемента с первой буквой.

::перед псевдо-элементом

Как следует из названия, псевдоэлемент::before в CSS используется для добавления специального стиля CSS перед содержимым любого элемента.

Синтаксис:

selector::before {
  property: value;
}

Псевдоэлемент в примере CSS:::перед псевдоэлементом

Рассмотрим приведенный ниже HTML-код:






    




    
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
    





{"mode":"full","isActive":false}

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый символ поэтому (∴) применяется перед элементом , и это возможно только с помощью::перед псевдо-элементом.

::после псевдоэлемента

Как следует из названия, псевдоэлемент::after в CSS используется для добавления специального стиля CSS после содержимого любого элемента.

Синтаксис:

selector::after {
  property: value;
}

Псевдоэлемент в примере CSS:::после псевдоэлемента

Рассмотрим приведенный ниже HTML-код:






    




    
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
    





{"mode":"full","isActive":false}

Если вы попытаетесь запустить приведенный выше HTML-файл, вывод будет:

Как вы можете видеть, желаемый символ поэтому (∴) применяется после элемента , и это возможно только с помощью::после псевдоэлемента.

Аналогично, в CSS доступно гораздо больше псевдоэлементов, таких как:

Псевдоэлемент::маркер

Псевдоэлемент::marker в CSS используется для добавления специального стиля CSS к маркерам списка, таким как неупорядоченные маркеры списка, упорядоченные номера списка и т.д.

Синтаксис:

selector::marker {
  property: value;
}

Псевдоэлемент::выбор

Псевдоэлемент::selection в CSS используется для добавления специального стиля CSS к выбранной пользователем части или контенту.

Синтаксис:

selector::selection {
  property: value;
}

Обратная совместимость

Подобно псевдо-элементам, также существует псевдокласс CSS. Для определения псевдокласса используется один двоеточие (:).

Синтаксис:

selector:pseudo-class {
  property: value;
}

Но вы можете столкнуться с ситуациями, когда один двоеточие используется как для псевдокласса, так и для псевдо–элементов. Это связано с тем, что до CSS3 и псевдокласс, и псевдо-элементы имели одинаковый синтаксис. В CSS3 для псевдоэлементов было введено двойное двоеточие (::) вместо одного двоеточия (:). Таким образом, вы можете увидеть синтаксис с одним двоеточием, используемый как для псевдоклассов, так и для псевдо-элементов в CSS2 и CSS1.

Для обратной совместимости синтаксис с одним двоеточием приемлем для псевдоэлементов CSS2 и CSS1. Рассмотрите приведенную ниже таблицу для получения полной диаграммы обратной совместимости псевдоэлементов в CSS:

Почему Обычные Локаторы Нельзя Использовать Для Автоматизации Псевдоэлементов В Selenium?

Вам, должно быть, интересно, почему мы не можем использовать обычные локаторы Selenium для автоматизации псевдоэлементов в CSS. Чтобы понять это, давайте сначала попробуем автоматизировать их с помощью локаторов Селена.

Давайте рассмотрим следующую веб-страницу:






    




    
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.
        
The quick brown fox jumps over the lazy dog.

В этом, как вы можете видеть, мы использовали::перед псевдо-элементом, который добавляет символ, следовательно (∴) перед текстом кнопки (т.Е. Отправить).

Примечание: Чтобы помочь с автоматизацией, я загрузил этот код в образец GitHub репозитория.

Итак, давайте попробуем автоматизировать этот элемент с помощью локатора селектора CSS в JavaScript.

// Include the chrome driver
require("chromedriver");

// Include selenium webdriver
let webdriver = require("selenium-webdriver");
var By = require("selenium-webdriver").By;
let browser = new webdriver.Builder();
let driver = browser.forBrowser("chrome").build();

driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

var element = driver.findElement(By.css(".submitButton::before")).getText();

element.then(function(txt) {
    console.log(txt);
});

driver.quit();

Пошаговое руководство по коду:

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

// Include selenium webdriver
let swd = require("selenium-webdriver");
var By = require("selenium-webdriver").By;
let browser = new swd.Builder();
let driver = browser.forBrowser("chrome").build();

Во-первых, Веб-драйвер Selenium настроен для локального браузера Chrome.

driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

Затем страница, на которой я опубликовал HTML-код, открывается в локальном браузере Chrome. Вы также можете использовать свой локальный URL-адрес для этой строки.

var element = driver.findElement(By.css(".submitButton::before")).getText();

Затем с помощью CSS-селектора вызывается нужный псевдоэлемент, и результат сохраняется в элементе переменной.

element.then(function(txt) {
    console.log(txt);
});

При выполнении метода findElement() на последнем шаге вызывается нужный псевдоэлемент, и результат сохраняется в элементе переменной. Затем он проверяется с помощью метода then() и выводится на консоль в следующей строке.

водитель.выход();

Наконец, локальный браузер завершается уничтожением экземпляра Selenium WebDriver.

Ожидаемый Результат:

В идеале, согласно локаторам в Selenium , приведенный выше код должен выдавать значение свойства содержимого в качестве выходного:

“∴ “

Фактический Объем Производства:

После выполнения теста вы получите результат в виде NoSuchElementError.

Почему NoSuchElementError?

Хотя локатор правильный, вы не можете работать с псевдоэлементами с обычными локаторами селена. Это происходит потому, что псевдоэлементы в CSS на веб-странице обрабатываются как элемент JavaScript. Это означает, что эти псевдоэлементы в CSS выполняются во внешнем интерфейсе во время выполнения, когда страница загружается, а не изначально. Вот почему, когда веб-драйвер Selenium хочет взаимодействовать с этими псевдоэлементами, код выдает NoSuchElementError.

Давайте Попробуем На Java

Рассмотрим следующий Java-код, который пытается использовать CSS-селектор Selenium locator и получить значение псевдоэлемента.

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class PseudoElements {

    public static void main(String[] args) {

        // Instantiate a ChromeDriver class.
        WebDriver driver = new ChromeDriver();

        // Launch Website
        driver.navigate().to("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

        // Maximize the browser
        driver.manage().window().maximize();

        // Scroll down the webpage by 5000 pixels
        //      JavascriptExecutor js = (JavascriptExecutor) driver;
        //      js.executeScript("scrollBy(0, 5000)");

        String text = driver.findElement(By.cssSelector(".submitButton::before")).getText();
        System.out.print(text);

        driver.quit();

    }

}
{"mode":"full","isActive":false}

При выполнении код Java также выдает исключение NoSuchElementException.

Как Работать С Псевдоэлементами В Селене?

Поскольку локаторы Селена не работают с псевдоэлементами, возникает вопрос, есть ли какой-либо способ работы с псевдоэлементами в Селене?

Да. Псевдоэлементы могут быть автоматизированы в Selenium с помощью JavascriptExecutor. По определению, JavascriptExecutor – это интерфейс, который помогает выполнять JavaScript через Selenium Webdriver. Поскольку псевдоэлементы в CSS обрабатываются как JavaScript, следовательно, мы можем использовать Javascriptexecutor для взаимодействия с ними.

Например, чтобы получить значение свойства content в приведенном выше коде, код JavascriptExecutor будет:

script = "return window.getComputedStyle(document.querySelector('.submitButton'),'::before').getPropertyValue('content')";

var element = driver.executeScript(script);

Давайте посмотрим с помощью полного кода.

Как Работать С Псевдоэлементами В Selenium JavaScript?

Если вы новичок в JavaScript с Selenium, ознакомьтесь с нашим подробным руководством по Автоматизация тестирования с помощью Selenium с использованием JavaScript . Рассмотрим следующий тест, написанный на JavaScript для запуска в локальном Google Chrome.

// Include the chrome driver
require("chromedriver");

// Include selenium webdriver
let webdriver = require("selenium-webdriver");
var By = require("selenium-webdriver").By;
let browser = new webdriver.Builder();
let driver = browser.forBrowser("chrome").build();

driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

script = "return window.getComputedStyle(document.querySelector('.submitButton'),'::before').getPropertyValue('content')";

var element = driver.executeScript(script);

element.then(function(txt) {
    console.log(txt);
});

driver.quit();
{"mode":"full","isActive":false}

Пошаговое руководство по коду:

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

// Include selenium webdriver
let swd = require("selenium-webdriver");
var By = require("selenium-webdriver").By;
let browser = new swd.Builder();
let driver = browser.forBrowser("chrome").build();

Во-первых, веб-драйвер Selenium настроен для локального браузера Chrome.

driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

Затем страница, на которой я опубликовал HTML-код, открывается в локальном браузере Chrome. Вы также можете использовать свой локальный URL-адрес для этой строки.

script = "return window.getComputedStyle(document.querySelector('.submitButton'),'::before').getPropertyValue('content')";

var element = driver.executeScript(script);

Написан скрипт для получения значения свойства (содержимого) кнопки отправки класса. Затем он выполняется с помощью метода driver.executeScript().

element.then(function(txt) {
    console.log(txt);
});

При выполнении скрипта на последнем шаге вызывается нужный псевдоэлемент, и результат сохраняется в элементе переменной. Затем он проверяется с помощью метода then() и выводится на консоль в следующей строке.

водитель.выход();

Наконец, локальный браузер завершается уничтожением экземпляра Selenium WebDriver.

Выход:

После выполнения вышеуказанного теста результат будет:

Как вы можете видеть, теперь мы получили идеальный результат:

“∴ “

Как Работать С Псевдоэлементами В Selenium Java?

JavascriptExecutor можно использовать для работы с псевдоэлементами в Selenium Java. Рассмотрим следующий тест, написанный на Java для запуска в локальном Google Chrome.

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class PseudoElements {

    public static void main(String[] args) {

        // Instantiate a ChromeDriver class.
        WebDriver driver = new ChromeDriver();

        // Launch Website
        driver.navigate().to("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

        // Maximize the browser
        driver.manage().window().maximize();

        JavascriptExecutor js = (JavascriptExecutor) driver;
        String text = js.executeScript("return window.getComputedStyle(document.querySelector('.submitButton'),'::before').getPropertyValue('content')")
                .toString();

        System.out.print(text);

        driver.quit();

    }

}
{"mode":"full","isActive":false}

Пошаговое руководство по коду:

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

// Instantiate a ChromeDriver class.
WebDriver driver = new ChromeDriver();

Во-первых, веб-драйвер Selenium настроен для локального браузера Chrome.

driver.navigate().to("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

Затем страница, на которой я опубликовал HTML-код, открывается в локальном браузере Chrome. Вы также можете использовать свой локальный URL-адрес для этой строки.

// Maximize the browser
driver.manage().window().maximize();

Затем браузер развертывается с помощью метода maximize().

JavascriptExecutor js = (JavascriptExecutor) driver;

String text = js.executeScript("return window.getComputedStyle(document.querySelector('.submitButton'),'::before').getPropertyValue('content')")
                .toString();

Написан скрипт для получения значения свойства (содержимого) кнопки отправки класса. Затем он выполняется с помощью метода JavascriptExecutor.executeScript(), и значение извлекается в виде строки в тексте переменной.

System.out.печать (текст);

При выполнении скрипта на последнем шаге вызывается нужный псевдоэлемент, и результат сохраняется в переменной text. Затем он выводится на консоль.

водитель.выход();

Наконец, локальный браузер завершается уничтожением экземпляра Selenium WebDriver.

Выход:

После выполнения вышеуказанного теста результат будет:

Starting ChromeDriver 90.0.4430.24 (4c6d850f087da467d926e8eddb76550aed655991-refs/branch-heads/4430@{#429}) on port 22874
Only local connections are allowed.
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.
May 24, 2021 3:15:07 AM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: W3C
"∴ "

Как вы можете видеть, теперь мы получили идеальный результат. "∴ "

Запуск Тестов На Облачной Сетке Selenium

Решением проблем или ограничений локальной настройки Selenium является облачная сетка Selenium. Одним из таких облачных поставщиков Selenium Grid является Лямбда-тест. Лямбда-тест позволяет вам запускать тесты в своей онлайн-облачной сетке Selenium в более чем 2000 браузерах, версиях браузеров и операционных системах с помощью удаленного WebDriver.

Чтобы запустить автоматизацию тестирования Selenium на сетке лямбда-теста Selenium, вам необходимо:

  • Имя пользователя для лямбда-теста и ключ доступа.
  • Selenium Предоставляет необходимые возможности для выполнения тестов в нужной комбинации браузеров, версий браузеров и операционных систем. Эти желаемые возможности Selenium зависят от языка и могут быть легко написаны с помощью генератора желаемых возможностей лямбда-теста.

Например, предположим, что браузер, который мы хотим протестировать, – это Firefox версии 89 и операционная система mac OS Big Sur. Кроме того, давайте попробуем сделать это с разрешением 1280×960.

  • Браузер: Firefox
  • Версия браузера: 89
  • Операционная система: mac OS Big Sur
  • Разрешение: 1280×968

Таким образом, мы можем выбрать те же возможности из генератора возможностей.

Давайте попробуем преобразовать наш локальный код настройки автоматизации тестирования Selenium для выполнения на платформе тестирования Lambda.

Выполнение Кода Java В Лямбда-Тесте

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

  • Чтобы задать имя пользователя и ключ доступа, замените свой из раздела профиля в приведенном ниже фрагменте кода для URL-адреса сетки. URL-адрес сетки – это ваш конкретный маршрут удаленного веб-драйвера, на котором будут выполняться тесты.
String gridURL = "http://" + username + ":" + accesskey + "@hub.lambdatest.com/wd/hub";
  • Следующий, получите вышеупомянутые желаемые возможности для Java из генератора возможностей:
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("build", "your build name");
capabilities.setCapability("name", "your test name");
capabilities.setCapability("platform", "MacOS Big sur");
capabilities.setCapability("browserName", "Firefox");
capabilities.setCapability("version","89.0");
capabilities.setCapability("resolution","1280x960");
  • Нам нужно создать удаленный экземпляр WebDriver и инициализировать его с помощью вышеуказанных возможностей и URL-адреса сетки.
DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("build", "Cap Gen Demo");
capabilities.setCapability("name", "Win10 Firefox85 1280x800");
capabilities.setCapability("platform", "MacOS Big sur");
capabilities.setCapability("browserName", "Firefox");
capabilities.setCapability("version","89.0");
capabilities.setCapability("resolution","1280x960");

String gridURL = "http://" + username + ":" + accesskey + "@hub.lambdatest.com/wd/hub";

try {
    driver = new RemoteWebDriver(new URL(gridURL), capabilities);
} catch (Exception e) {
    System.out.println("driver error");
    System.out.println(e.getMessage());
}

Это оно. Теперь мы можем использовать этот удаленный экземпляр WebDriver для написания и выполнения нашего теста, чтобы показать работу с псевдоэлементами в Selenium. Ниже приведен полный код Java:

import org.testng.annotations.Test;
import java.net.URL;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;

public class PseudoElementsOnLambdaTest {

    public static WebDriver driver;
    public static String status = "failed";

    @BeforeTest(alwaysRun = true)
    public void setUp() throws Exception {

        DesiredCapabilities capabilities = new DesiredCapabilities();
        capabilities.setCapability("build", "Cap Gen Demo");
        capabilities.setCapability("name", "Win10 Firefox85 1280x800");
        capabilities.setCapability("platform", "MacOS Big sur");
        capabilities.setCapability("browserName", "Firefox");
        capabilities.setCapability("version", "89.0");
        capabilities.setCapability("resolution", "1280x960");

        String gridURL = "http://" + username + ":" + accesskey + "@hub.lambdatest.com/wd/hub";

        try {
            driver = new RemoteWebDriver(new URL(gridURL), capabilities);
        } catch (Exception e) {
            System.out.println("driver error");
            System.out.println(e.getMessage());
        }
    }

    @Test
    public static void test() throws InterruptedException {

        // Launch Website
        driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");

        // Maximize the browser
        driver.manage().window().maximize();

        // Scroll down the webpage by 5000 pixels
        JavascriptExecutor js = (JavascriptExecutor) driver;
        String text = js.executeScript(
                "return window.getComputedStyle(document.querySelector('.submitButton'),'::before').getPropertyValue('content')")
                .toString();

        System.out.print(text);

        status = "passed";
        Thread.sleep(150);

    }

    @AfterTest
    public static void afterTest() {
        ((JavascriptExecutor) driver).executeScript(+ status + "");
        driver.quit();
    }

}
{"mode":"full","isActive":false}

После выполнения автоматизации тестирования Selenium вы можете увидеть, как тест запускается в нужной конфигурации среды на платформе LambdaTest. Вы даже можете обратиться к видео выполнения теста, чтобы просмотреть фактическое выполнение теста.

Выполнение Кода JavaScript В Лямбда-Тесте

Аналогично, давайте попробуем выполнить наш код JavaScript на платформе лямбда-теста. Для получения краткого обзора по тестированию автоматизации с помощью Selenium и JavaScript, ознакомьтесь с приведенным ниже видео с YouTube-канала LambdaTest.

@

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

  • Чтобы задать имя пользователя и ключ доступа, замените свой из раздела профиля в приведенном ниже фрагменте кода для URL-адреса сетки. URL-адрес сетки – это ваш конкретный маршрут удаленного веб-драйвера, на котором будут выполняться тесты.
String gridURL = "http://" + username + ":" + accesskey + "@hub.lambdatest.com/wd/hub";
  • Следующий, получите вышеупомянутые желаемые возможности для Java из генератора возможностей:
var capabilities = {
        "build" : "your build name",
        "name" : "your test name",
        "platform" : "MacOS Big sur",
        "browserName" : "Firefox",
        "version" : "89.0",
        "resolution" : "1280x960"
    }
  • Нам нужно создать удаленный экземпляр WebDriver и инициализировать его с помощью вышеуказанных возможностей и URL-адреса сетки.
LT_USERNAME = "username";
LT_ACCESS_KEY = "access key";

caps = {
  'build': 'Mocha-Selenium-Sample', //Build name
  'name': 'Your Test Name', // Test name
  'platform':'MacOS Big sur', // OS name
  'browserName': 'Firefox', // Browser name
  'version': '89.0', // Browser version
  "resolution" : "1280x960",
  'visual': false,  // To take step by step screenshot
  'network':false,  // To capture network Logs
  'console':false, // To capture console logs.
  'tunnel': false // If you want to run the localhost, then change it to true
  };

var buildDriver = function () {
    return new webdriver.Builder()
        .usingServer(
            "http://" +
            LT_USERNAME +
            ":" +
            LT_ACCESS_KEY +
            "@hub.lambdatest.com/wd/hub"
        )
        .withCapabilities(caps)
        .build();
};

Это оно. Теперь мы можем использовать этот удаленный экземпляр WebDriver для написания и выполнения нашего теста, чтобы показать работу с псевдоэлементами в Selenium. Ниже приведен полный код JavaScript:

LT_USERNAME = "username";
LT_ACCESS_KEY = "access key";

exports.capabilities = {
  'build': 'Pseudo ELements', //Build name
  'name': 'Your Test Name', // Test name
  'platform':'MacOS Big sur', // OS name
  'browserName': 'Firefox', // Browser name
  'version': '89.0', // Browser version
  "resolution" : "1280x960",
  'visual': false,  // To take step by step screenshot
  'network':false,  // To capture network Logs
  'console':false, // To capture console logs.
  'tunnel': false // If you want to run the localhost, then change it to true
  };
{"mode":"full","isActive":false}

var assert = require("assert"),
    webdriver = require("selenium-webdriver"),
    conf_file = process.argv[3] || "conf/single.conf.js";

var caps = require("../" + conf_file).capabilities;

var buildDriver = function (caps) {
    return new webdriver.Builder()
        .usingServer(
            "http://" +
            LT_USERNAME +
            ":" +
            LT_ACCESS_KEY +
            "@hub.lambdatest.com/wd/hub"
        )
        .withCapabilities(caps)
        .build();
};

describe("Pseudo-Elements " + caps.browserName, function () {
    var driver;
    this.timeout(0);

    beforeEach(function (done) {
        caps.name = this.currentTest.title;
        driver = buildDriver(caps);
        done();
    });

    it("Pseudo ELements JavaScript", function (done) {
        driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html").then(function () {
            script = "return window.getComputedStyle(document.querySelector('.submitButton'),'::before').getPropertyValue('content')";

            var element = driver.executeScript(script);

            element.then(function (txt) {
                console.log(txt);
            });
        });
    });

    afterEach(function (done) {
        if (this.currentTest.isPassed) {
            driver.executeScript("lambda-status=passed");
        } else {
            driver.executeScript("lambda-status=failed");
        }
        driver.quit().then(function () {
            done();
        });
    });
});
{"mode":"full","isActive":false}

После выполнения вы можете увидеть, как тест запускается в нужной конфигурации среды на платформе тестирования Лямбда.

Пользовательский интерфейс веб-страницы часто очень сложен, и для тестирования полного пользовательского интерфейса Автоматизация Selenium является одним из наиболее эффективных способов. Вы можете даже столкнуться со сложными псевдоэлементами в CSS, но метод работы с этими псевдоэлементами в Selenium останется прежним. Вы можете использовать JavaScript-исполнитель для автоматизации псевдоэлементов на любом языке.

Наряду с тестированием пользовательского интерфейса, необходимо также обеспечить кроссбраузерную совместимость веб-страницы. Поскольку локальная настройка автоматизации тестирования Selenium не может быть использована для обеспечения этого, облачная сетка Selenium, такая как LambdaTest, эффективна.

Мы надеемся, что вы научились работать с псевдоэлементами в Селене. Спасибо.

Оригинал: “https://dev.to/paulharshit/how-to-handle-pseudo-elements-in-css-with-selenium-1705”

Читайте ещё по теме: