--- title: Record tests with Playwright | Testing Resources description: Learn how to use a Playwright Recorder to easily record tests. source_url: html: https://testingbot.com/resources/articles/playwright-recorder md: https://testingbot.com/resources/articles/playwright-recorder.md --- ![Record tests with Playwright](https://testingbot.com/assets/resources/articles/32.webp) # Playwright Recorder Learn how to use a Playwright Recorder to easily record tests. By [Jochen D.](https://testingbot.com/about/jochen-d)2023-09-20 Share on Facebook Share on Twitter Post on Reddit Share link Playwright is an open-source browser instrumentation framework, created by Microsoft. It is used by developers and QA to run automated tests against websites, with support for various browsers. Chromium browsers (Chrome, Microsoft Edge) and Firefox browsers can be instrumented through the Playwright library. If you are looking to run automated tests with Playwright, you might be interested in learning how to create these Playwright test scripts. You can learn the syntax by reading the documentation, or you can jump straight to generating the test files, by recording your actions. A Playwright Recorder will record any actions that you do, with the possibility to export all these actions into a functional Playwright test file. All of this, without you having to write any code yourself. ## Table of Contents - [What is a Playwright Recorder?](https://testingbot.com#recorder) - [How can I record Playwright scripts from Visual Studio Code?](https://testingbot.com#vscode) - [How can I run Playwright tests that have been recorded?](https://testingbot.com#test) - [How TestingBot runs recorded Playwright tests in the cloud.](https://testingbot.com#testingbot) ## What is a Playwright Recorder? A Playwright recorder is a tool that will record Playwright tests for you, without you having to write any test code yourself. The advantage of using a recorder is that you can simply interact with the website you want to test, from your own browser. The recorder will record all actions and generate a Playwright test script when you are finished. There are several options use you can use to start recording:. - You can start from your terminal, using the command line. An example of this is located in the TestingBot Playwright docs: [Playwright Recorder](https://testingbot.com/support/web-automate/playwright/recorder). A simple example is below, where the playwright CLI is used to start recording. - There's a [Visual Studio Code Playwright Extension](https://testingbot.com#vscode) which you can install to record the tests. ## How can I record Playwright scripts from Visual Studio Code? If you are using Visual Studio Code to write Playwright tests, then you might be interested in installing a VSCode extension from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). Once installed, the extension will allow you to record a new Playwright test from a browser. While you interact with the browser during the recording, the extension will automatically add the Playwright test code in a file. ![Playwright Recorder](https://testingbot.com/assets/resources/articles/images/playwright-recorder.webp) You can click the **Record new** button in the **Tests** tab of VSCode. A new browser will open. You can navigate to the website you want to run Playwright tests against and start interacting with the website. The extension will automatically write the code in a new spec file. For example: ```javascript import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.goto('https://testingbot.com/'); await page.getByText('Take your automated and manual testing to the next level. With over 9 years of e').click(); await page.getByText('manual').click(); await page.getByRole('img', { name: 'Automated Testing' }).click(); }); ``` When you've finished recording, simply close the browser window. You can now run the Playwright test on your local computer, or [in the cloud](https://testingbot.com/support/web-automate/playwright). ## How can I run Playwright tests that have been recorded? Playwright test files can be run in two modes: - **Standalone** : if you've recorded the tests and added `const pw = require('playwright')` at the top of the file, you can simply use NodeJS to run the script. - If you are using `@playwright/test`, you can use: ```bash npx playwright test ``` If you are interested in running Playwright tests through TestingBot, please see the TestingBot [Playwright Test Examples](https://testingbot.com/support/web-automate/playwright/playwright-test#example). The benefit of running in the cloud is that you can run more tests in parallel and on a larger number of possible browser/version/platform combinations. ## How TestingBot runs recorded Playwright tests in the cloud. You can edit your current Playwright scripts and replace the `browser` object with: ```javascript const browser = await pw.chromium.connect({ wsEndpoint: 'wss://cloud.testingbot.com/playwright?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest', }); ``` This will fetch a remote browser to run Playwright tests. You can specify additional options in the `wsEndpoint` to indicate on which browser configuration you'd like to run. For Playwright test files, you can see how to run Playwright tests on TestingBot in the [Playwright Test documentation](https://testingbot.com/support/web-automate/playwright/playwright-test). You'll need to provide a custom `playwright.config.js` file, and run the tests with `npx playwright test`. TestingBot will automatically record a video of the Playwright test and extract all meta-data such as screenshots and log files generated during the test. ## Sidebar ### TestingBot Cloud Testing Run automated, manual and visual tests on remote browsers and devices. Sign up for a free trial. [Free Trial](https://testingbot.com/users/sign_up) ### Latest articles [![Testing with React and Selenium](https://testingbot.com/assets/resources/articles/31-744de7cfd83a956722f63fdccfc836d4cd8ee5182785fd84f7bbabe3a40e1615.webp)](https://testingbot.com/resources/articles/react-selenium-testing) #### [Testing with React and Selenium](https://testingbot.com/resources/articles/react-selenium-testing) Learn how to run Selenium tests against a React based web... [Read article →](https://testingbot.com/resources/articles/react-selenium-testing) [![How to fix Flaky Tests](https://testingbot.com/assets/resources/articles/30-da23ef05df0b04704e23e77b3b068cc04d038f42ca12ae7123c8039acf5fb41d.webp)](https://testingbot.com/resources/articles/handling-test-flakiness) #### [How to fix Flaky Tests](https://testingbot.com/resources/articles/handling-test-flakiness) Learn about Flaky Tests: why they happen and how to fix t... [Read article →](https://testingbot.com/resources/articles/handling-test-flakiness) [![Test Automation with ChatGPT](https://testingbot.com/assets/resources/articles/29-7c01b99e7284a560ad99094e3ce738c4942eee113a51295a0a8e9cd8fe0cbba5.webp)](https://testingbot.com/resources/articles/test-automation-with-chatgpt) #### [Test Automation with ChatGPT](https://testingbot.com/resources/articles/test-automation-with-chatgpt) An introduction into generating test scripts with ChatGPT... [Read article →](https://testingbot.com/resources/articles/test-automation-with-chatgpt) ## Other Articles [![Testing with React and Selenium](https://testingbot.com/assets/resources/articles/31-744de7cfd83a956722f63fdccfc836d4cd8ee5182785fd84f7bbabe3a40e1615.webp)](https://testingbot.com/resources/articles/react-selenium-testing "Testing with React and Selenium") ### [Testing with React and Selenium](https://testingbot.com/resources/articles/react-selenium-testing) Learn how to run Selenium tests against a React based website. [Read article →](https://testingbot.com/resources/articles/react-selenium-testing) [![How to fix Flaky Tests](https://testingbot.com/assets/resources/articles/30-da23ef05df0b04704e23e77b3b068cc04d038f42ca12ae7123c8039acf5fb41d.webp)](https://testingbot.com/resources/articles/handling-test-flakiness "How to fix Flaky Tests") ### [How to fix Flaky Tests](https://testingbot.com/resources/articles/handling-test-flakiness) Learn about Flaky Tests: why they happen and how to fix these, with various examples. [Read article →](https://testingbot.com/resources/articles/handling-test-flakiness) [![Test Automation with ChatGPT](https://testingbot.com/assets/resources/articles/29-7c01b99e7284a560ad99094e3ce738c4942eee113a51295a0a8e9cd8fe0cbba5.webp)](https://testingbot.com/resources/articles/test-automation-with-chatgpt "Test Automation with ChatGPT") ### [Test Automation with ChatGPT](https://testingbot.com/resources/articles/test-automation-with-chatgpt) An introduction into generating test scripts with ChatGPT's AI language model. [Read article →](https://testingbot.com/resources/articles/test-automation-with-chatgpt) [![Selenium and Generative AI](https://testingbot.com/assets/resources/articles/28-af707bf052844eb00f861bb6ebba57e6be4479dde1c78a5df4e70d2f597a8b18.webp)](https://testingbot.com/resources/articles/generative-ai-selenium "Selenium and Generative AI") ### [Selenium and Generative AI](https://testingbot.com/resources/articles/generative-ai-selenium) Generate realistic looking test data to be used with your Selenium Automated Tests. [Read article →](https://testingbot.com/resources/articles/generative-ai-selenium) ## Ready to start testing? [Start a free trial](https://testingbot.com/users/sign_up)