yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: explain attachments in ui mode (#23472)

Browse Source
This commit is contained in:
Debbie O'Brien 2023-06-06 07:30:29 -07:00 committed by GitHub
parent dfe40de1fe
commit dfd1518327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/src/test-ui-mode-js.md
View File

@ -50,6 +50,12 @@ As you hover over each action of your test the source code for the test is highl
![showing log of tests in ui mode](https://user-images.githubusercontent.com/13063165/234323603-3d9a152d-f9fc-48d8-82d2-26c8c1866abb.png)
### Attachments
The "Attachments" tab allows you to explore attachments. If you're doing [visual regression testing](./test-snapshots.md), you'll be able to compare screenshots by examining the image diff, the actual image and the expected image. When you click on the expected image you can use the slider to slide one image over the other so you can easily see the differences in your screenshots.
![ui mode with attachments](https://github.com/microsoft/playwright/assets/13063165/bed993d7-7720-4624-b32f-4d7a543a732d)
### Pop out and inspect the DOM
Pop out the DOM snapshot into it's own window for a better debugging experience by clicking on the pop out icon above the DOM snapshot. From there you can open the browser DevTools and inspect the HTML, CSS, Console etc. Go back to UI Mode and click on another action and pop that one out to easily compare the two side by side or debug each individually.
@ -74,4 +80,4 @@ Click on the pick locator button and hover over the DOM snapshot to see the loca
Next to the name of each test in the sidebar you will find an eye icon. Clicking on the icon will activate watch mode which will re-run the test when you make changes to it. You can watch a number of tests at the same time be clicking the eye icon next to each one or all tests by clicking the eye icon at the top of the sidebar. If you are using VS Code then you can easily open your test by clicking on the file icon next to the eye icon. This will open your test in VS Code right at the line of code that you clicked on.
![watch mode in ui mode](https://user-images.githubusercontent.com/13063165/234304918-dd0fb6d5-bfb1-4182-8c55-33cd3da5f83e.png)
![watch mode in ui mode](https://user-images.githubusercontent.com/13063165/234304918-dd0fb6d5-bfb1-4182-8c55-33cd3da5f83e.png)