Introduction

Testing-library is a collection of tools for testing web application user interfaces, focused on creating reliable and maintainable tests by emphasizing user behavior. The main advantage of testing-library is its focus on interaction with interface elements. And in testplane, you can use the element search methods provided by the testing-library itself.

Installation

1. Install the npm package @testplane/testing-library:

npm i -D @testplane/testing-library

2. Include it in the Testplane config in the prepareBrowser section:

// .testplane.conf.js
const { setupBrowser } = require("@testplane/testing-library");

module.exports = {
    prepareBrowser(browser) {
        setupBrowser(browser);
    },

    // other Testplane settings...
};

If you are using TypeScript and experiencing issues with testing-library types, you may add the following line to your tsconfig.json

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

Usage

After configuring, you will be able to use the search by selectors from testing-library, as described in the official documentation. For example, searching for an element by its text:

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

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

    await newRepoButton.click();
});

This feature will also be available in the context of found elements:

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();
});

Disclaimer: All testing-library selectors return a promise and cannot be chained (like browser.getByText().click() — this is not possible). Each testing-library selector must be awaited before performing any actions on it.