Skip to main content

How to Connect testing-library in testplane

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.

Connection​

To be able to use queries from testing-library in Testplane tests, you only need to follow a few steps.

  1. Install the npm package @testplane/testing-library (our adapter package for the original testing-library)
npm i -D @testplane/testing-library
  1. Include it in the Testplane config in the prepareBrowser section:
// testplane.config.ts
import { setupBrowser } from "@testplane/testing-library";

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

    // other settings for testplane...
};

If you have problems with types, add types obviously to tsconfig.json

{
    "compilerOptions": {
        "types": ["testplane", "@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();
});

For a complete usage example, visit this link.