Mastering Test Automation: How data-testid Can Revolutionize UI Testing

Selenium

Как можно реализовать данный подход?

Реализация подхода с использованием атрибута data-testid в процессе前端-разработки включает несколько шагов, начиная от настройки проекта и заканчивая лучшими практиками использования атрибута. Вот шаблонный guide о том, как реализовать этот подход.

Ориентироваться на тестирование с самого начала

Планирование тестирования

Перед началом кодирования убедитесь, что тестоспособность является ключевым моментом в дизайне UI-компонентов. discuss с вашей командой, как элементы будут тестироваться и где будут использоваться атрибуты data-testid.

Включите QA с самого начала

Включите инженеров QA в процесс разработки сразу, чтобы идентифицировать, какие элементы будут нуждаться в атрибутах data-testid. Это сотрудничество гарантирует, что компоненты разрабатываются с учетом тестирования.

Добавьте атрибуты data-testid к вашим компонентам

Определите ключевые элементы

Определите, какие элементы в вашей UI важны для тестирования. Это могут быть кнопки, вводные элементы формы, ссылки и любая динамическая информация, с которой будут взаимодействовать ваши тесты.

Примените data-testid

Добавьте атрибут data-testid к этим ключевым элементам. Например:

<button data-testid="submit-button">Submit</button>
<input data-testid="username-input" type="text" />

Избегайте чрезмерного использования

Не добавляйте data-testid к каждому элементу. Сфокусируйтесь на элементах, прямо связанных с вашими тест-ケース. чрезмерное использование data-testid может забить вашу HTML и сделать ее труднее поддерживать.

Пишите скрипты тестирования с использованием data-testid

Обновите существующие тесты

Если у вас есть набор существующих тестов, переформатируйте ваши тесты, используя селекторы с атрибутом data-testid, когда это возможно. Это улучшит устойчивость ваших тестов. Пример с Playwright и Cypress:

JavaScript

// Playwright-тест с использованием data-testid
await page.click('[data-testid="submit-button"]');
await page.fill('[data-testid="username-input"]', 'testuser');



// Cypress-тест с использованием data-testid
cy.get('[data-testid="submit-button"]').click();
cy.get('[data-testid="username-input"]').type('testuser');

保持测试的可读性

Используйте значимые и описательные значения для атрибута data-testid. Это делает ваши тесты более читабельными и легче понимаемыми.

Интегрируйте data-testid в вашу разрабатываемую рабочуюflow

Стандартизируйте использование

Создайте руководство или наименование для convension data-testid в вашем проекте. Это обеспечит一致性 в базе кода и сделает его легче всем членам команды следовать.

Code Reviews

При просмотре кода, убедитесь, что атрибуты data-testid используются соответствующим образом и последовательно. Убедитесь, что они имеют значение и необходимы для тестирования.

Лучшие практики использования data-testid

使用连字符分隔的名称:偏好使用连字符或snake_case命名约定 для data-testid значений (например, submit-button, username_input), чтобы сохранить имена последовательными и читабельными.
避免使用动态数据: не включайте динамические данные, такие как временные метки или ID-ы, в значения data-testid, так как они могут изменяться, и это делает ваши селекторы менее надежными.
Тест покрытия баланса: Используйте data-testid для критических UI-элементов, которые требуют тестирования, но не полагайтесь на него слишком сильно.Combine it with other selectors where appropriate to keep your tests comprehensive.

Оценка влияния на развитие автоматизации

Состояние стабильности в автоматизации: Благодаря data-testid, обеспечивающему стабильные селекторы, ваши автоматические тесты станут более надежными и легче обслуживаться, снижаяnumber of flaky tests.
Сохранение времени: Сокращение сроков обслуживания тестов позволяет вашему团队 focuses on writing new tests and improving test coverage.
Улучшенное сотрудничество: Разработчики и инженеры QA могут работать вместе более эффективно, так как использование data-testid является простым и делает замысел behind each test clear.

Автоматизируйте и поддерживайте ваши тесты

Интеграция CI/CD: Интегрируйте ваш набор тестов в ваш поток CI/CD. Это позволяет запускать автоматизированные тесты с каждым выпуском кода, обеспечивая стабильность вашего приложения.
Мониторинг и обновление:Regularly review your tests and data-testid usage as the application evolves. Update or add new data-testid attributes as new features are developed.

Образование команды

Обучение: Предоставляйте семинары или документацию для вашей команды о том, как правильно использовать data-testid both in development and testing.
Постоянное усовершенствование: Содействуйте получению обратной связи от вашей команды о использовании data-testid и улучшайте свой подход на основе их входных данных.

Как мне внедрить данный подход в различные фреймворки?

Внедрение подхода data-testid в различные тестовые фреймворки, такие как Selenium, Playwright и Cypress, требует понимания того, как каждое инструментальное средство взаимодействует с DOM и как вы можете использовать атрибут data-testid для создания стабильных и надежных тестовых сценариев. Вот подробное руководство по внедрению этого подхода с использованием каждого из этих инструментов.

1. Selenium

Selenium взаимодействует с веб-элементами, используя локаторы, такие как ID, класс, имя, XPath и т.д. Используя data-testid, вы можете создавать более стабильные селекторы, которые независимы от визуальной структуры страницы. Предположим, у вас есть форма входа с полями для имени пользователя, пароля и кнопкой отправки.

HTML-код:

<form>
  <input data-testid="username-input" type="text" name="username" />
  <input data-testid="password-input" type="password" name="password" />
  <button data-testid="submit-button" type="submit">Login</button>
</form>

Тестовый сценарий Selenium:

Java

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

public class LoginTest {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        driver.get("http://yourapp.com/login");

        // Найти элементы с использованием data-testid
        WebElement usernameInput = driver.findElement(By.cssSelector("[data-testid='username-input']"));
        WebElement passwordInput = driver.findElement(By.cssSelector("[data-testid='password-input']"));
        WebElement submitButton = driver.findElement(By.cssSelector("[data-testid='submit-button']"));

        // Взаимодействовать с элементами
        usernameInput.sendKeys("testuser");
        passwordInput.sendKeys("password");
        submitButton.click();

        // Выполнить дальнейшие действия или утверждения
        driver.quit();
    }
}

Преимущества в Selenium

Стабильность: Использование data-testid в Selenium обеспечивает, что ваши локаторы менее подвержены изменениям из-за изменений в UI.
Удобство обслуживания: Легче обновлять или рефакторить тесты, так как data-testid менее склонен к изменениям, чем классы или ID.

2. Playwright

Playwright предоставляет мощные способности автоматизации для веб-приложений. Он поддерживает селекторы, такие как CSS, текст, XPath и data-testid.

Пример

Использование того же примера формы входа:

Сценарий теста Playwright (TypeScript):

TypeScript

import { chromium, Browser, Page } from 'playwright';

(async () => {
    const browser: Browser = await chromium.launch();
    const page: Page = await browser.newPage();
    await page.goto('http://yourapp.com/login');

    // Использование data-testid для нахождения элементов
    await page.fill('[data-testid="username-input"]', 'testuser');
    await page.fill('[data-testid="password-input"]', 'password');
    await page.click('[data-testid="submit-button"]');

    // Выполнение дальнейших действий или утверждений
    await browser.close();
})();

Преимущества в Playwright

Эффективность: Поддержка data-testid в Playwright помогает писать краткие и ясные сценарии тестирования.
Устойчивость: Селекторы data-testid делают сценарии тестирования более устойчивыми к изменениям структуры DOM.

3. Cypress

Cypress – это каркас тестирования JavaScript для тестирования конца-конца, который обеспечивает отличное опыт разработчика. Он также поддерживает атрибут data-testid для нахождения элементов.

Пример

Использование той же формы входа:

Сценарий теста Cypress (JavaScript):

JavaScript

describe('Login Test', () => {
  it('should login with valid credentials', () => {
    cy.visit('http://yourapp.com/login');

    // Использование data-testid для нахождения элементов
    cy.get('[data-testid="username-input"]').type('testuser');
    cy.get('[data-testid="password-input"]').type('password');
    cy.get('[data-testid="submit-button"]').click();

    // Выполнение дальнейших действий или утверждений
    cy.url().should('include', '/dashboard');
  });
});

Преимущества в Cypress

Опыт разработчика: Синтаксис Cypress в сочетании с data-testid приводит к очень читаемым и поддерживаемым сценариям тестирования.
Стабильность тестов: Селекторы data-testid делают тесты более надежными, уменьшая вероятность их сбоя из-за изменений в пользовательском интерфейсе.

Лучшие практики использования data-testid

Значимое именование: Используйте описательные имена для атрибутов data-testid. Например, data-testid="submit-button" более значим, чем data-testid="btn1".
Согласованность: Сохраняйте согласованность в применении data-testid на протяжении вашего приложения. Это помогает создавать стандартизированные сценарии тестирования.
Выборочное использование: Применяйте data-testid к элементам, важным для тестирования. Избегайте чрезмерного использования, так как это может запутать ваш HTML.
Избегайте динамических данных: Не включайте динамические значения, такие как временные метки или уникальные идентификаторы в атрибуты data-testid, так как это может привести к сбоям тестов при изменении данных.

Заключение

Внедрение подхода с data-testid в процесс фронт-энд разработки предлагает значительные преимущества в различных тестовых фреймворках, таких как Selenium, Playwright и Cypress. Он улучшает стабильность, читаемость и поддерживаемость ваших тестовых сценариев, ведущих к более надежному тестированию и более эффективному процессу QA. Следуя примерам и лучшим практикам, представленным здесь, вы можете гладко интегрировать data-testid в ваш рабочий процесс и улучшить общее качество вашего продукта.

Ссылки

Source:
https://dzone.com/articles/how-data-testid-can-revolutionize-ui-testing