{"id":10184,"date":"2025-09-21T17:13:00","date_gmt":"2025-09-21T17:13:00","guid":{"rendered":"https:\/\/testgrid.io\/blog\/?p=10184"},"modified":"2025-10-08T17:06:01","modified_gmt":"2025-10-08T17:06:01","slug":"playwright-component-testing","status":"publish","type":"post","link":"https:\/\/testgrid.io\/blog\/playwright-component-testing\/","title":{"rendered":"A Beginner’s Guide to Component Testing with Playwright"},"content":{"rendered":"\n

With the growing complexity of web applications, performing end-to-end testing<\/a> on them is equally complex. The traditional strategy of testing the application UI can be flaky and may require regular maintenance. A paradigm shift towards component testing in such an environment is useful.<\/p>\n\n\n\n

By testing components in isolation, modern web UIs can be tested with a scalable approach. Teams are adopting component-driven architectures like React, and using a component testing strategy can gain overall testing confidence and quality. Playwright comes with the perfect capability to make component testing a perfect fit in your test tech stack. In this article, we will explore how we can write component tests using Playwright.<\/p>\n\n\n\n

What is Component Testing?<\/h2>\n\n\n\n

Component testing can be attributed to be the testing microcosm, which focuses on verifying individual building blocks. The end-to-end test can be flaky, but these component tests are focused, much more reliable, and fast. When components are developed keeping in mind the testability, it yields less tightly coupled code. Additionally, testing early also prevents regression issues from bumping in later in the development cycle. Playwright offers component testing with vital advantages discussed in the section below.<\/p>\n\n\n\n

Using Playwright for Component Testing<\/h2>\n\n\n\n

Playwright provides true isolation for the tests. It comes with a mounting and mocking model which is reliable and allows to unit test UI components without the need of an actual browser or server. This can be combined with Playwright\u2019s WebDriver capabilities for the end-to-end tests, which provides a complete spectrum coverage. This offering can hugely increase productivity and efficiency.\u00a0<\/p>\n\n\n\n

With Playwright you can easily target React components to test modular UIs. Playwright also ensures that the test reliability and speed are taken care of, while the developers can focus on building rather than debugging. This helps in creating a testing strategy unified across different levels achievable. Playwright component testing makes sure that irrespective of the complexity of the front end, quality is delivered.<\/p>\n\n\n\n

Also Read: Playwright Automation Framework: Getting Started Guide<\/a><\/p>\n\n\n\n

Component Testing with Playwright<\/h2>\n\n\n\n

We will now start our journey to write our first component test using Playwright, but before we begin we will first create a React App. This React App will be used for running the component tests against its components.<\/p>\n\n\n\n

React App Creation<\/h3>\n\n\n\n
    \n
  1. Open Visual Studio Code.<\/li>\n\n\n\n
  2. Open the terminal and navigate to a folder where you would want to keep the react Keep.<\/li>\n\n\n\n
  3. Now, enter the command:<\/li>\n<\/ol>\n\n\n\n

    npx create-react-app appName<\/p>\n\n\n\n

    Once done, you will see that an app is created with the name that you gave.<\/p>\n\n\n\n

    \"React<\/figure>\n\n\n\n
    \"react<\/figure>\n\n\n\n

    4. Next, you can open the project you just created in Visual Studio and look at its project structure:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The different folders within our project consist of the logo, images, main HTML page, app information, styles for the application components, the main component of the app, vector images, performance vitals, index js file, etc. These files help in creating a structure for our project. Note that we will be using this default project for our test execution. In real, your applications may have other files and components as well.<\/p>\n\n\n\n

    React App Launch<\/h3>\n\n\n\n

    Now that we have created the React App we will launch it. We will use the start command to start the application. Navigate to the app location using the terminal and enter the below command:<\/p>\n\n\n\n

    npm start<\/strong><\/p>\n\n\n\n

    Once done, you will notice that your React App is up and running.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Additionally, you will notice that a browser window opens up showing a page like below:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Installing Playwright Components<\/h3>\n\n\n\n

    After starting the React App, the next step is to start writing the tests. Before we do so we will have to install the playwright components module. To do so, run the below command in the terminal:<\/p>\n\n\n\n

    npm init playwright@latest -- --ct<\/code><\/pre>\n\n\n\n
    Upon execution, you will see some questions to which you can select the answer that suits your requirements. We are using Typescript & React 18 in this article.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Once the Playwright Component is installed, you will notice that some folders and files are also created, which can be seen from the updated project structure.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The new files created are the index files, .html & .tsx. One will be used to render components while testing alongside mounting the components. The other can be used to apply styles, and themes as well as inject code to the page where components will be mounted.<\/p>\n\n\n\n
    Additionally, there is a playwright-ct configuration file, which can be used to configure the browsers, timeouts, reports, etc.<\/p>\n\n\n\n
    After launching the React App and setting up the test framework, the next step id to write the components tests.<\/p>\n\n\n\n
    Writing and Executing the Component Test<\/h3>\n\n\n\n
    We will first create a tests<\/em><\/strong> folder under the src<\/em><\/strong> folder, and in it, we will create our first component test file, componentTest.spec.tsx<\/em><\/strong>.<\/p>\n\n\n\n
    Unlike the regular end-to-end tests where we used .ts as the extension, we use .tsx here because the React components use the JSX syntax.<\/p>\n\n\n\n
    Write the code below in the .tsx file we just created:<\/p>\n\n\n\n
    \/\/Imports the test and expect functions from the Playwright ct-react module\nimport { test, expect } from '@playwright\/experimental-ct-react';\n\/\/Imports the App component to test from the relative ..\/App path\nimport App from '..\/App';\n\n\n\/\/Configures the viewport to a 500x500 size\ntest.use({ viewport: { width: 500, height: 500 } });\n\/\/Starts a test case named \"should work\" which will run asynchronously,\n\/\/mount function binding is destructured from test parameter\ntest('should work', async ({ mount }) => {\n\/\/Uses mount() to instantiate the <App \/> component in isolation\n const component = await mount(<App><\/App>);\n \/\/Asserts that component contains expected \"Learn React\" text on it verifying basic render.\n await expect(component).toContainText('Learn React');\n});\n<\/code><\/pre>\n\n\n\n
    Before you execute this, you will have to create a tsconfig.json<\/em><\/strong> file inside your project directory. In this file, you will have to enable the Javascript extension using the compilerOptions. Use the code below in the tsconfig.json file:<\/p>\n\n\n\n
    {\n   \"compilerOptions\": {\n     \"jsx\": \"react-jsx\",\n     \"target\": \"ESNext\",\n     \"module\": \"commonjs\",\n     \"moduleResolution\": \"Node\",\n     \"sourceMap\": true,\n     \"strict\": true,\n     \"noImplicitAny\": false\n   }\n }\n<\/code><\/pre>\n\n\n\n
    In this file we are trying to configure the Typescript compiler to output CommonJS modules, enable React JSX, use the node module resolution strategy and enable strict type checking for the project. Note that you can alter this file as per your requirements.<\/p>\n\n\n\n
    The next step is to execute the component test and to do so, run the below command in the terminal:<\/p>\n\n\n\n
    npm run test-ct<\/strong><\/p>\n\n\n\n
    You will see that the component test was executed successfully with logs as below:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Additionally, you can view the HTML report for your test:<\/p>\n\n\n\n
    \"running<\/figure>\n\n\n\n
    Now let us add some components to our app. We will be adding a counter to the React App and to do so, create a file Counter.js <\/em><\/strong>under the src <\/em><\/strong>folder and add the code below to it:<\/p>\n\n\n\n
    \/\/ Import the useState hook from React\nimport { useState } from 'react'; \n\n\n\/\/ Export a default function component called Counter\nexport default function Counter() {\n\n\n \/\/ Use the useState hook to create count state variable and\n \/\/ setCount function to update it\n const [count, setCount] = useState(0); \n\n\n return (\n   <div>\n     <button onClick={() => setCount(count + 1)}>\n       Increment \n     <\/button>\n\n\n     <span>{count}<\/span>\n   <\/div>\n );\n\n\n}\n<\/code><\/pre>\n\n\n\n
    Now, we will have to include this Counter component to our React App. To do so, open the App.js <\/em><\/strong> and update the code as below:<\/p>\n\n\n\n
    import logo from '.\/logo.svg';\nimport '.\/App.css';\nimport Counter from '.\/Counter';\n\n\nfunction App() {\n return (\n   <div className=\"App\">\n     <Counter\/>\n     <header className=\"App-header\">\n       <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n       <p>\n         Edit <code>src\/App.js<\/code> and save to reload.\n       <\/p>\n       <a\n         className=\"App-link\"\n         href=\"https:\/\/reactjs.org\"\n         target=\"_blank\"\n         rel=\"noopener noreferrer\"\n       >\n         Learn React\n       <\/a>\n     <\/header>\n   <\/div>\n );\n}\n\n\nexport default App;\n\n<\/code><\/pre>\n\n\n\n
    Now, open the React App by running below command in terminal:<\/p>\n\n\n\n
    npm start<\/strong><\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    This will launch the browser, and now you will see an Increment button on top of the webpage:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Now, we will update our test to validate this new component. Update the componentTest.spec.tsx<\/em><\/strong> as below:<\/p>\n\n\n\n
    \/\/Imports the test and expect functions from the Playwright ct-react module\nimport { test, expect } from '@playwright\/experimental-ct-react';\n\/\/Imports the App component to test from the relative ..\/App path\nimport App from '..\/App';\n\n\n\/\/Configures the viewport to a 500x500 size\ntest.use({ viewport: { width: 500, height: 500 } });\n\n\/\/Starts a test case named \"should work\" which will run asynchronously,\n\/\/mount function binding is destructured from test parameter\ntest('should work', async ({ mount }) => {\n\/\/Uses mount() to instantiate the <App \/> component in isolation\n const component = await mount(<App><\/App>);\n \/\/Asserts that component contains expected \"Learn React\" text on it verifying basic render.\n await expect(component).toContainText('Learn React');\n\n\n \/\/Searches the Increment button\n await component.getByRole('button', { name: 'Increment' }).click();\n \/\/Asserts that the increment value is visible\n expect(component.getByText('1')).toBeVisible();\n\n\n});\n<\/code><\/pre>\n\n\n\n
    Execute the test by running command npm run test-ct<\/em><\/strong> and see the execution results:<\/p>\n\n\n\n
    \"playwright<\/figure>\n\n\n\n
    And there you go, you test passed with this newly added component. Let us see how we can execute a test for this component in isolation in the text section.<\/p>\n\n\n\n
    Executing Component Tests in Isolation<\/h3>\n\n\n\n
    To execute this newly added component in isolation, go to your componentTest.spec.tsx <\/em><\/strong>and replace the import of the app with the Counter component. Additionally, we will replace the <App> component with <Counter> as shown in the code below:<\/p>\n\n\n\n
    \/\/Imports the test and expect functions from the Playwright ct-react module\nimport { test, expect } from '@playwright\/experimental-ct-react';\n\/\/Imports the Counter component to test from the relative ..\/Counter path\nimport Counter from '..\/Counter';\n\n\n\/\/Configures the viewport to a 500x500 size\ntest.use({ viewport: { width: 500, height: 500 } });\n\/\/Starts a test case named \"should work\" which will run asynchronously,\n\/\/mount function binding is destructured from test parameter\ntest('should work', async ({ mount }) => {\n\/\/Uses mount() to instantiate the <Counter \/> component in isolation\n const component = await mount(<Counter><\/Counter>);\n \/\/Asserts that the button is visible\n await expect(component.getByRole('button')).toBeVisible();\n \/\/Searches the Increment button\n await component.getByRole('button', { name: 'Increment' }).click();\n});\n<\/code><\/pre>\n\n\n\n
    Let us now execute our test and see the results:<\/p>\n\n\n\n
    \"\"<\/p>\n\n\n\n
    And there you go. You have executed a component-specific test in isolation using Playwright. You can integrate other Playwright capabilities of Visual testing to capture screenshots.<\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n