Перейти к основному содержимому

Как подключить testing-library в testplane

Введение​

Testing-library - это коллекция инструментов для тестирования пользовательского интерфейса веб-приложений, ориентированная на создание надежных и поддерживаемых тестов, сосредотачиваясь на пользовательском поведении. Основное преимущество testing-library заключается в фокусе на взаимодействии с элементами интерфейса. И в testplane можно пользоваться способами поиска элемента, представленными самой библиотекой testing-library.

Подключение​

Для того чтобы появилась возможность использования запросов (queries) из testing-library в testplane-тестах, необходимо выполнить всего несколько шагов.

  1. Установите npm-пакет @testplane/testing-library (наша адаптация testing-library для testplane)
npm i -D @testplane/testing-library
  1. Подключите реализацию в конфиге testplane в секции prepareBrowser
// testplane.config.ts
import { setupBrowser } from "@testplane/testing-library";

export default {
    prepareBrowser(browser) {
        setupBrowser(browser);
    },

    // другие настройки testplane...
};

Если у вас возникнут проблемы с типами, то добавьте типы явно в tsconfig.json

{
    "compilerOptions": {
        "types": ["testplane", "@testplane/testing-library"]
    }
}

Использование​

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

it("example", async ({ browser }) => {
    await browser.url("https://github.com/");

    const newRepoButton = await browser.getByText("New");

    await newRepoButton.click();
});

В контексте найденных элементов эта возможность также будет доступна:

it("example", async ({ browser }) => {
    await browser.url("https://github.com/");

    const sidebar = await browser.$(".dashboard-sidebar");
    const newRepoButton = await sidebar.getByText("New");

    await newRepoButton.click();
});

Полный пример использования можно найти здесь.