Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

readme: update screenshots #474

Merged
merged 1 commit into from
May 13, 2024
Merged

readme: update screenshots #474

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 24 additions & 37 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,108 +6,95 @@ This extension integrates Playwright into your VS Code workflow. Here is what it
- [Requirements](#requirements)
- [Install Playwright](#install-playwright)
- [Run tests with a single click](#run-tests-with-a-single-click)
- [Run Multiple Tests](#run-multiple-tests)
- [Run multiple tests](#run-multiple-tests)
- [Run tests in watch mode](#run-tests-in-watch-mode)
- [Show browsers](#show-browsers)
- [Show trace viewer](#show-trace-viewer)
- [Pick locators](#pick-locators)
- [Debug step-by-step, explore locators](#debug-step-by-step-explore-locators)
- [Tune locators](#tune-locators)
- [Record new tests](#record-new-tests)
- [Record at cursor](#record-at-cursor)


<img width="1268" alt="example test in vs code" src="https://user-images.githubusercontent.com/13063165/194532498-b7f88d69-65a3-49f4-b701-5ef7134bc551.png">
![Playwright VS Code Extension](https://github.com/microsoft/playwright-vscode/assets/13063165/400a3f11-a1e8-4fe7-8ae6-b0460142de35)

### Requirements

This extension works with [Playwright] version v1.19+ or newer.


*If you are looking for the old extension that supported Playwright v1.14+, switch to v0.0.9 of this extension manually. Having said that, we highly recommend using the latest version of [Playwright Test]!*


*If you are looking for the old extension that supported Playwright v1.14+, switch to v0.0.9 of this extension manually. Having said that, we highly recommend using the latest version of [Playwright]!*

## Install Playwright

If you don't have the Playwright NPM package installed in your project, or if you are starting with a new testing project, the "Install Playwright" action from the command panel will help you get started.


<img width="1189" alt="Install Playwright" src="https://user-images.githubusercontent.com/13063165/193314391-6c1df069-857f-4fff-b4fd-5a228bd2fb5d.png"/>
![Install Playwright](https://github.com/microsoft/playwright-vscode/assets/13063165/716281a0-4206-4f53-ad27-4a6c8fe1c323)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally this screenshot is wider so "Install Playwright" gets shown.


Pick the browsers you'd like to use by default, don't worry, you'll be able to change them later to add or configure the browsers used. You can also choose to add a GitHub Action so that you can easily run tests on Continuous Integration on every pull request or push.

<img width="1189" alt="Choose browsers" src="https://user-images.githubusercontent.com/13063165/193314396-a32e6344-89ad-429e-a886-5367917602f3.png" />


![Choose browsers](https://github.com/microsoft/playwright-vscode/assets/13063165/138a65cb-96f1-41bc-8f3d-0aaff7835920)

The extension automatically detects if you have [Playwright] installed and loads the browsers, known as [Playwright] projects, into Visual Studio Code. By default it will select the first project as a run profile. Inside the test explorer in VS Code you can change this behavior to run a single test in multiple or different browsers.


![select-profile](https://user-images.githubusercontent.com/13063165/194548273-c7034777-e510-49af-9834-99e9eb528a45.gif)


![select project](https://github.com/microsoft/playwright-vscode/assets/13063165/414f375d-865f-4882-9ca0-070b4a76ce50)

## Run tests with a single click

Click the green triangle next to the test you want to run. You can also run the test from the testing sidebar by clicking the grey triangle next to the test name.

![run-tests](https://github.com/microsoft/playwright-vscode/assets/13063165/08eff858-b2ce-4a8d-8eb3-97feba478e68)

![runtest](https://user-images.githubusercontent.com/13063165/194504291-c797fab1-7ad2-47dc-8d6f-371ce22d01d7.gif)


## Run Multiple Tests
## Run multiple tests

You can use the Testing sidebar to run a single test or a group of tests with a single click. While tests are running, the execution line is highlighted. Once the line has completed, the duration of each step of the test is shown.

![run-multiple-tests](https://github.com/microsoft/playwright-vscode/assets/13063165/542fb6c4-15ee-4f54-b542-215569c83fbf)

## Run tests in watch mode

![runtests](https://user-images.githubusercontent.com/13063165/193856188-4103cbb6-9115-42eb-aed3-d06ffc78c2cc.gif)
Click the "eye" icon to run tests in watch mode. This will re-run the watched tests when you save your changes.

<br/>
![watch-mode](https://github.com/microsoft/playwright-vscode/assets/13063165/fdfb3348-23b2-4127-b4c1-3103dbde7d8a)

## Show browsers

Check the "show browsers" checkbox to run tests with the browser open so that you can visually see what is happening while your test is running. Click on "close all browsers" to close the browsers.

![show-browser](https://github.com/microsoft/playwright-vscode/assets/13063165/3e1ab5bb-8ed2-4032-b6ef-81fc4a38bf8f)

## Show trace viewer

![show-browser](https://user-images.githubusercontent.com/13063165/194509233-b2b708cb-e7c4-48ec-b9ea-80587371bbbd.gif)
Check the "show trace viewer" checkbox to see a full trace of your test.

<br/>
![trace-viewer](https://github.com/microsoft/playwright-vscode/assets/13063165/959cb45c-7104-4607-b465-bf74099142c5)

## Pick locators

Click the "pick locator" button and hover over the browser to see the locators available. Clicking an element will store it in the locators box in VS Code. Pressing enter will save it to the clip board so you can easily paste it into your code or press the escape key to cancel.

![pick-locator](https://user-images.githubusercontent.com/13063165/194384763-96263c13-8435-425f-ba4b-6029a7c67f3d.gif)

<br/>
![pick-locator](https://github.com/microsoft/playwright-vscode/assets/13063165/3bcb9d63-3d78-4e1a-a176-79cb12b39202)

## Debug step-by-step, explore locators

Right click and start breakpoint debugging. Set a breakpoint and hover over a value. When your cursor is on some Playwright action or a locator, the corresponding element (or elements) are highlighted in the browser.

![debugging](https://user-images.githubusercontent.com/13063165/194526375-9d2b339e-e108-45d5-a53b-e884661c1954.gif)

<br/>
![debug](https://github.com/microsoft/playwright-vscode/assets/13063165/7db9e6d4-f1b3-4794-9f61-270f78e930d8)

## Tune locators

You can edit the source code to fine-tune locators while on a breakpoint. Test out different locators and see them highlighted in the browser.


![edit-locators](https://user-images.githubusercontent.com/13063165/194527588-5d7d1e7f-6eac-4050-8a87-ac009c221f65.gif)

<br/>
![tune-locators](https://github.com/microsoft/playwright-vscode/assets/13063165/00d7cd44-e9b0-472d-9f1f-f8882802d73a)

## Record new tests

Record new tests by clicking on the "record tests" button in the testing sidebar. This will open a browser window where you can navigate to a URL and perform actions on the page which will be recorded to a new test file in VS Code.

![record-new2](https://user-images.githubusercontent.com/13063165/194530684-2f8b89b4-8973-4ae7-a327-27ec51fc6d51.gif)

<br>
![record-test](https://github.com/microsoft/playwright-vscode/assets/13063165/841dbc65-35d7-40eb-8df2-5906b7aad4c6)

## Record at cursor

This generates actions into the existing test at the current cursor position. You can run the test, position the cursor at the end of the test and continue generating the test.


[Playwright]: https://playwright.dev "Playwright"