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 npm init playwright@latest -- --ct The command asks you two questions: choose to to this tutorial Which framework do you use? (experimental) react Install Playwright browsers
choose to true When the installation ends, there will be a new file in your project called: . This file contains the configuration for the components' testing.For this tutorial, you have to change only one configuration, property from to . 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. playwright-ct.config.ts testDir ./ ./src First Test Let's start with the first component test. Create a file called in the folder , and inside of it, copy this code. Icon.spec.tsx src/components/Icon/ 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 and import your component. @playwright/experimental-ct-react 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 method, you can render the component in the DOM, and then you can check the result using the Playwright APIs. mount For instance, in this case, the test checks if the and attributes have the correct value. src title 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 npx playwright test -c playwright-ct.config.ts and then npx playwright show-report the result is like this. 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 if you want to dive into it. documentation I hope you enjoyed this content. See you soon folk. Bye Bye 👋 You can find the code of this post here Also published . here

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

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Use Components in Playwright

Too Long; Didn't Read

Luca Del Puppo

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Use Components in Playwright

Too Long; Didn't Read

Luca Del Puppo

STORY’S CREDIBILITY

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES