\
Hi there,

Today I'll speak about a beta feature in Playwright: Components.

\
The team is building a new feature to write component tests with Playwright, so it's time to see how it works.

## Installation

To start to use this feature, you have to install it. To do that, type in your terminal

\
```bash
npm init playwright@latest -- --ct
```

\
The command asks you two questions:

* **Which framework do you use? (experimental)**
  choose to *react* to this tutorial
* Install Playwright browsers
  choose to *true*

\
When the installation ends, there will be a new file in your project called: `playwright-ct.config.ts`. This file contains the configuration for the components' testing.For this tutorial, you have to change only one configuration, `testDir` property from `./` to `./src`. Playwright uses this configuration to understand where the files used for the components' tests are located. In this example, you'll put the test file in the same folder as the component.

## First Test

Let's start with the first component test.

\
Create a file called `Icon.spec.tsx` in the folder `src/components/Icon/`, and inside of it, copy this code.

\
```typescript
import { expect, test } from '@playwright/experimental-ct-react';
import Icon from './Icon';

test.use({ viewport: { width: 500, height: 500 } });

const props = {
  src: 'src',
  title: 'title',
}

test('should work', async ({ mount }) => {
  const component = await mount(<Icon src={props.src} title={props.title} />);
  await expect(component).toHaveAttribute('src', 'src');
  await expect(component).toHaveAttribute('title', props.title);
});
```

\
As you can see, the structure is similar to other Testing Frameworks.

\
You have to import the methods relative to react components from the path `@playwright/experimental-ct-react` and import your component.

Then you can set up the viewport for your test; it's important to understand that the tests run in different browsers, so you can also test your components in different viewports. And at the end, it's time to check your component.

\
The test structure is straightforward; using the `mount` method, you can render the component in the DOM, and then you can check the result using the Playwright APIs.

\
For instance, in this case, the test checks if the `src` and `title` attributes have the correct value.

Using these tests, you can check the proper logic or the right representation of your components and guarantee the right render in different browsers.

## Run the test

Cool, you set up Playwright, and you wrote the tests. Now it's time to run it.Easy peasy lemon squeezy, type in your terminal the following command

\
```bash
npx playwright test -c playwright-ct.config.ts
```

\
and then

\
```bash
npx playwright show-report
```

\
the result is like this.

\
 ![Playwright result](https://cdn.hackernoon.com/images/OmKMeHfFEFVT1OzgqCJxvATaLOp2-2023-02-09T10:34:14.506Z-cldwyq0dm000z0as6ad8e3vah)

\
As you can notice, Playwright runs the test in three different browsers by default. You can decide where to run the tests, adding or removing the browsers from the configuration file.

\
Perfect! I think you have a good introduction to component testing with Playwright.

The feature is in experimental mode, so use it carefully, please.

You can find out more info in the official [documentation](https://playwright.dev/docs/test-components) if you want to dive into it.

\
I hope you enjoyed this content.

See you soon folk.

\
Bye Bye 👋

\
*You can find the code of this post* *[here](https://github.com/Puppo/playwright-series/tree/06-components)*

\

:::info
Also published [here](https://blog.delpuppo.net/playwright-components-testing).

:::

\


The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How to Use Components in Playwright

Too Long; Didn't Read

@puppo

Credibility

RELATED STORIES