|
| 1 | +<p align="center"> |
| 2 | + <picture> |
| 3 | + <source media="(prefers-color-scheme: dark)" srcset="./docs/images/logo-light.svg" width="600"> |
| 4 | + <source media="(prefers-color-scheme: light)" srcset="./docs/images/logo-dark.svg" width="600"> |
| 5 | + <img alt="testplane testing library logo" src="./docs/images/logo-dark.svg" width="600"> |
| 6 | + </picture> |
| 7 | +</p> |
| 8 | + |
| 9 | +<p align="center"> |
| 10 | +<a href="https://testplane.io/docs/v8/guides/how-to-add-testing-library/"><img src="https://img.shields.io/badge/Docs-Website-6c47ff" alt="Total Downloads"></a> |
| 11 | + <a href="https://www.npmjs.com/Яpackage/@testplane/testing-library"><img src="https://img.shields.io/npm/v/@testplane/testing-library.svg" alt="Latest Release"></a> |
| 12 | + <a href="https://github.com/gemini-testing/testplane-testing-library/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@testplane/testing-library.svg" alt="License"></a> |
| 13 | + <a href="https://t.me/testplane"><img src="https://img.shields.io/badge/community-chat-blue?logo=telegram" alt="Community Chat"></a> |
| 14 | +</p> |
| 15 | + |
| 16 | + |
| 17 | +## Introduction |
| 18 | +[Testing-library](https://testing-library.com/) 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. |
| 19 | + |
| 20 | +## Installation |
| 21 | + |
| 22 | +1. Install the npm package `@testplane/testing-library`: |
| 23 | +```shell |
| 24 | +npm i -D @testplane/testing-library |
| 25 | +``` |
| 26 | + |
| 27 | +2. Include it in the Testplane config in the `prepareBrowser` section: |
| 28 | +```js |
| 29 | +// .testplane.conf.js |
| 30 | +const { setupBrowser } = require("@testplane/testing-library"); |
| 31 | + |
| 32 | +module.exports = { |
| 33 | + prepareBrowser(browser) { |
| 34 | + setupBrowser(browser); |
| 35 | + }, |
| 36 | + |
| 37 | + // other Testplane settings... |
| 38 | +}; |
| 39 | +``` |
| 40 | + |
| 41 | +If you are using TypeScript and experiencing issues with testing-library types, you may add the following line to your tsconfig.json |
| 42 | + |
| 43 | +```json |
| 44 | +{ |
| 45 | + "compilerOptions": { |
| 46 | + "types": [ |
| 47 | + "@testplane/testing-library" |
| 48 | + ] |
| 49 | + } |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +## Usage |
| 54 | + |
| 55 | +After configuring, you will be able to use the search by selectors from `testing-library`, as described in the [official documentation](https://testing-library.com/docs/queries/about/). For example, searching for an element by its text: |
| 56 | + |
| 57 | +```js |
| 58 | +it("example", async ({ browser }) => { |
| 59 | + await browser.url("https://github.com/"); |
| 60 | + |
| 61 | + const newRepoButton = await browser.getByText("New"); |
| 62 | + |
| 63 | + await newRepoButton.click(); |
| 64 | +}); |
| 65 | + |
| 66 | + |
| 67 | +``` |
| 68 | + |
| 69 | +This feature will also be available in the context of found elements: |
| 70 | + |
| 71 | +```js |
| 72 | +it("example", async ({ browser }) => { |
| 73 | + await browser.url("https://github.com/"); |
| 74 | + |
| 75 | + const sidebar = await browser.$(".dashboard-sidebar"); |
| 76 | + const newRepoButton = await sidebar.getByText("New"); |
| 77 | + |
| 78 | + await newRepoButton.click(); |
| 79 | +}); |
| 80 | +``` |
| 81 | + |
| 82 | +Disclaimer: |
| 83 | +All testing-library selectors return a promise and cannot be chained (like `browser.getByText().click()` — this is not possible). |
| 84 | +Each testing-library selector must be awaited before performing any actions on it. |
0 commit comments