При выполнении автоматизации тестирования вы сталкивались с множеством сценариев, в которых необходимо проверить свойства и значения WebElements. Например, вам может понадобиться получить текстовое значение элемента в коде автоматизированного теста, а затем проверить его на соответствие желаемому значению. В Selenium метод getText() используется для получения текстового значения WebElement.
Что, если тестовый сценарий более сложен и недостаточно просто получить текстовое значение элемента? В таких случаях вам нужно будет использовать дополнительные (и соответствующие) свойства WebElements. Точно так же мы можем столкнуться с ситуацией, когда просто проверки текстового значения недостаточно для тестирования, и нам нужно получить дополнительные свойства элементов, которые статически или динамически доступны в DOM. Будь то JavaScript или какой-либо другой язык программирования, поддерживаемый Selenium, получение определенных атрибутов WebElements может быть очень полезным при автоматическом тестировании Selenium.
В этом блоге мы углубимся в то, как получить атрибут данных в JavaScript для создания превосходных сценариев автоматизации тестирования Selenium.
Что такое атрибуты в HTML
Атрибуты в HTML играют важную роль, предоставляя дополнительную информацию об элементах HTML. Его также можно использовать для изменения поведения элементов путем реализации на них событий. Атрибуты в HTML обычно определяются с помощью пар имя-значение.
Имя — это свойство, которое вы хотите установить. Например, тег изображения
Элемент в примере содержит атрибут с именем src, который указывает источник изображения.
Значение указывает значение, которое необходимо установить для соответствующего свойства. Оно всегда заключено в кавычки. Вот пример, который показывает значение изображения с расширением .jpeg.
<img src='imagename.jpeg'/>
Имена атрибутов и значения атрибутов нечувствительны к регистру. Однако консорциум World Wide Web (W3C) рекомендует атрибуты нижнего регистра (или значения атрибутов) как часть рекомендации HTML 4. Вы можете проверить наш предыдущий блог, который поможет вам понять, как получить значение атрибута в Selenium WebDriver.
В этом учебном пособии по тестированию на основе данных давайте подробно рассмотрим, что такое тестирование на основе данных, его плюсы и минусы, его типы, тестирование на основе данных в гибкой среде, преимущества и передовой опыт: https: //www.lambdatest.com/learning-hub/data-driven-testing
Часто используемые атрибуты в автоматизированном тестировании
Хотя в HTML есть ряд атрибутов, только некоторые из них в основном используются для автоматизированного тестирования. Вот некоторые из часто используемых атрибутов в HTML:
- id: атрибут id используется для идентификации уникальных веб-элементов в DOM.
- класс. Атрибут класса позволяет классифицировать похожие веб-элементы.
- стиль: атрибут стиля используется для добавления стилей CSS к элементам WebElements.
- title: атрибут title используется для предоставления контекстной информации об элементах. Почти во всех веб-браузерах заголовок элемента может отображаться в виде всплывающей подсказки при наведении курсора мыши на окно.
Основные типы атрибутов
Ниже перечислены некоторые из основных категорий (или типов) атрибутов:
- Обязательные атрибуты. Эти атрибуты нельзя исключить из тегов HTML. Например, изображение не отображается на странице без src для ‹img›.
- Необязательные атрибуты. Эти атрибуты следует добавить, чтобы придать элементам больше смысла. Например, заголовок для ‹img› обеспечивает заголовок изображения, но не является обязательным атрибутом.
- Атрибуты событий. Эти атрибуты представляют собой события, которые запускаются в зависимости от действий пользователя. Например — событие onmouseover для любого html-элемента запускается, когда пользователь наводит указатель мыши на этот конкретный WebElement.
- Стандартные атрибуты. Их также называют глобальными атрибутами. Эта категория атрибутов может использоваться почти во всех тегах HTML (например, идентификатор, класс, стиль и т. д.).
Атрибуты в HTML играют все более важную роль в автоматизированном тестировании Selenium. Теперь, когда мы рассмотрели основы атрибутов в HTML, давайте рассмотрим основные аспекты того, как получить данные атрибутов в Selenium JavaScript.
Почему атрибуты важны для автоматизированного тестирования
Атрибуты могут изменить поведение WebElements в зависимости от сценариев (или событий), используемых для выполнения автоматизированного тестирования. Возьмем случай с приложением для бронирования автобуса. Здесь забронированные места обычно представлены «серым» цветом, тогда как «зеленый» цвет означает, что места доступны для бронирования. В случае искажения цветов клиенты столкнутся с проблемами при бронировании билетов. Клиенты потеряют доверие к бренду, что, в свою очередь, может снизить доходы компании.
Следовательно, становится чрезвычайно важным проверить, представлены ли забронированные и доступные билеты с правильной цветовой кодировкой.
Ручное тестирование не рекомендуется, так как это не масштабируемый и надежный подход. Однако такие сценарии можно протестировать, получив данные атрибутов в Selenium JavaScript. Таким образом, это идеальный подход к тестированию перед отправкой сборки в производственную среду.
Запускайте тесты автоматизации Jest параллельно в нескольких комбинациях браузеров и ОС с помощью LambdaTest. Подробнее: https://www.lambdatest.com/jest
Как получить данные атрибутов в тестах Selenium JavaScript
Selenium — популярный инструмент для тестирования веб-автоматизации из-за его большой поддержки сообщества с открытым исходным кодом и простоты написания тестов на выбранном вами языке программирования. Кроме того, среда автоматизации Selenium широко используется для тестирования на совместимость между браузерами, которое гарантирует, что веб-сайт (или веб-приложение) работает одинаково в разных комбинациях браузеров, платформ и устройств.
Используя Selenium и JavaScript, вы можете получить данные атрибутов HTML-элементов, отображаемых в текущем состоянии на веб-сайте (или в веб-приложении). Кроме того, вы также можете проверить измененные данные атрибутов после изменения событий в свойствах (например, цвет, обновления ссылок для тегов привязки и т. д.) WebElements.
getAttribute() в селене
Метод Selenium getAttribute() используется для получения атрибутов тестируемых HTML-элементов. Этот метод является частью класса WebElement. Метод getAttribute() можно использовать для получения значений различных атрибутов, таких как класс, имя, источник, значение стиля CSS и т. д.
Точнее, этот метод Selenium возвращает данные данного атрибута, если этот конкретный атрибут присутствует, иначе он возвращает null. Например, метод getAttribute() можно использовать для получения свойства value элемента textarea. Атрибут «стиль» преобразуется в текстовое представление с завершающей точкой с запятой.
Синтаксис
var ele = driver.findElement(By.id('#'));
var attribute_value= ele.getAttribute('attribute_name'); // returns the attribute value
Демонстрация — Как получить данные атрибутов в Selenium JavaScript
Прежде чем мы продемонстрируем, как получить данные атрибутов в Selenium с помощью JavaScript, необходимо подготовить базовые настройки для автоматизации тестирования Selenium. Вы можете обратиться к нашему предыдущему блогу под названием Автоматическое тестирование с помощью Selenium JavaScript, чтобы настроить среду для написания тестов в Selenium с привязками JavaScript.
Кроме того, вы также можете посетить канал LambdaTest на YouTube, чтобы посмотреть видеоролики, которые проведут вас через путешествие по Selenium JavaScript.
Рассмотрим пример приложения, которое продает различные типы ручек в Интернете. Это то, чего мы планируем достичь в рамках демонстрации того, как получить данные атрибутов с помощью Selenium и JavaScript.
Вы можете получить этот сертификат в качестве доказательства опыта в области автоматизации тестирования с помощью JavaScript, чтобы расширить свои возможности и повысить свою карьеру.
Вот краткий обзор сертификации Selenium JavaScript 101 от LambdaTest:
Сценарии тестирования
Два сценария будут автоматизированы с использованием Selenium и JavaScript. Сначала мы получаем данные соответствующих атрибутов на странице.
- Убедитесь, что цвет продукта совпадает с тем, что отображается пользователю, когда он пытается навести указатель мыши на образцы цвета, показанные в разделе фильтра.
- Убедитесь, что пользователь видит правильное название продукта, когда оно извлекается из серверной части.
Реализация
Тесты выполняются в облачной Selenium Grid компанией LambdaTest. Преимущество облачной Grid заключается в том, что автоматизация тестирования Selenium может выполняться в различных браузерах, платформах и комбинациях устройств в любом масштабе.
Вы можете выполнять параллельное тестирование в Selenium, чтобы использовать преимущества скорости и масштаба, предлагаемые LambdaTest Grid. Создав учетную запись на LambdaTest, запишите имя пользователя и ключ доступа в разделе Профиль LambdaTest.
Используйте Генератор возможностей LambdaTest, чтобы сгенерировать желаемые возможности браузера, относительно которых должна выполняться автоматизация тестирования Selenium. Установите для переменных среды LT_user и LT_token значение имени пользователя и ключа доступа LambdaTest соответственно.
require('dotenv').config();
exports.config = {
LT_user: process.env.LT_user, // Your LambdaTest username
LT_pass:process.env.LT_token, // Your LambdaTest token
capabilities: {
'build': 'Mocha-Selenium-Sample', //Build name
'name': 'Test sample for getAttribute()', // Test name
'platform': 'Windows 10', // OS name
'browserName': 'chrome', // Browser name
'version': 'latest', // Browser version
'visual': true, // To take step by step screenshot
'network': true, // To capture network Logs
'console': true, // To capture console logs.
}
}
Для демонстрации мы используем Selenium 4 (Beta 2) версию Selenium WebDriver. Чтобы узнать больше о предложениях Selenium 4, ознакомьтесь с разделом Selenium 4 в учебном центре LambdaTest.
{
"name": "lambdatest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha --recursive --timeout 300000 ./tests/tests.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"chromedriver": "^89.0.0",
"dotenv": "^8.2.0",
"mocha": "^8.3.2",
"selenium-webdriver": "^4.0.0-beta.2"
}
}
require('chromedriver');
const assert = require('assert');
const { Builder, By } = require('selenium-webdriver');
const { config } = require('../conf/conf.js');
const conf=require("../conf/conf.js").config;
const USERNAME = conf.LT_user
const KEY = conf.LT_pass;
const GRID_HOST = 'hub.lambdatest.com/wd/hub';
describe('Check Colours in filter section', function () {
let driver;
before(async function () {
let caps=conf.capabilities;
let gridUrl='https://' + USERNAME + ':' + KEY + '@' + GRID_HOST;
console.log(gridUrl)
driver = await new Builder().usingServer(gridUrl).withCapabilities(caps).build();
await driver.get('https://www.pens.com/ie/c/pens-writing');
});
it('Verify the colour matches the swatch title', async function () {
let list = await driver.findElements(By.css("a[class='colour-swatch ']"));
let colour=[];
for (item of list) {
//Using getAttribute to get the data
let col = await item.getAttribute("title");
colour.push(col)
}
console.log(colour)
});
it('Check the Product name matches with data attribute', async function(){
let product_data_attribute = await driver.findElement(By.id('product-card-1'));
let product_name_displayed = await driver.findElement(By.className('product-card__name'));
console.table([await product_data_attribute.getAttribute('data-prod-name') , await product_name_displayed.getText()])
});
after(() => driver && driver.quit());
})
Прохождение кода
Шаг 1:
В тестовой реализации используются возможности браузера, объявленные в conf.js. Тест будет проводиться в Chrome 89.0 на платформе Windows 10. Сетка LambdaTest, в которой выполняется веб-автоматизация Selenium, имеет значение hub.lambdatest.com/wd/hub.
let caps=conf.capabilities; let gridUrl='https://' + USERNAME + ':' + KEY + '@' + GRID_HOST;
Шаг 2.
Метод get Selenium WebDriver используется для установки тестового URL.
await driver.get('https://www.pens.com/ie/c/pens-writing');
Шаг 3.
Метод findElements в Selenium используется для поиска WebElements с помощью свойства CSS Selector. Вы можете проверить наш блог о том, как профессиональные тестировщики используют селекторы CSS для веб-автоматизации Selenium.
let list = await driver.findElements(By.css("a[class='colour-swatch ']"));
Инструмент проверки в браузере Chrome используется для поиска элементов WebElements.
Шаг 4:
Перейдите по всему списку, чтобы получить атрибут «название» для каждого элемента.
for (item of list) {
//Using getAttribute to get the data
let col = await item.getAttribute("title");
colour.push(col)
}
Как показано ниже, заголовок соответствующего элемента в списке — белый. В аналогичных строках у вас будут такие заголовки, как «Черный», «Голубой», «Синий» и т. Д. Для элементов в списке.
Шаг 5.
В функции «Проверить совпадение имени продукта с атрибутом данных» мы сначала находим WebElement, используя свойство ID (т. е. product-card-1).
let product_data_attribute = await driver.findElement(By.id('product-card-1'));
Шаг 6.
Используя свойство className в Selenium, мы находим имя продукта WebElement product-card__name.
let product_name_displayed = await driver.findElement(By.className('product-card__name'));
Вот как мы нашли WebElement с помощью Inspect Tool в Chrome (или Chrome DevTools):
Шаг 7.
Функция console.table в JavaScript используется для отображения данных в табличном формате. Метод getAttribute в Selenium используется для получения атрибута data-prod-name для каждого элемента.
console.table([await product_data_attribute.getAttribute('data-prod-name') , await product_name_displayed.getText()])
Вот как Inspect Tool в Chrome используется для получения сведений о соответствующем атрибуте:
Результаты выполнения
Запустите следующую команду в терминале, чтобы запустить пример, демонстрирующий, как получить данные атрибутов в Selenium с помощью JavaScript.
npm test
Вот снимок выполнения из терминала и дашборда автоматизации LambdaTest, который показывает, что выполнение теста прошло успешно.
Запустите мобильное тестирование нативных и веб-приложений с помощью Appium. Улучшите качество своего приложения с мгновенным доступом к реальным устройствам на LambdaTest. Зарегистрируйтесь сейчас бесплатно: https://www.lambdatest.com/appium-mobile-testing
Это все люди
В этом блоге мы научились читать (или получать) данные атрибутов с помощью JavaScript и Selenium. Это можно использовать в сценариях веб-автоматизации Selenium, где вам нужно считывать значения атрибутов на странице.
Метод getAttribute() в Selenium используется для чтения значения соответствующего атрибута. Мы также реализовали getAttribute() в облаке Selenium Grid, предлагаемом LambdaTest, и протестировали то же самое в браузере Chrome, установленном в Windows 10. Таким образом, тестирование совместимости браузера в больших масштабах может быть выполнено с использованием облачной Selenium Grid, такой как LambdaTest. Кроме того, он позволяет запускать тесты автоматизации в более чем 2000 браузерах и операционных системах в режиме онлайн.
Лучше всего использовать преимущества облачной Selenium Grid, чтобы вы могли более эффективно получать данные об атрибутах в Selenium JavaScript.
Удачного тестирования с Selenium и JavaScript!
