How to Generate Tests in Playwright with the VS Code Extension

Playwright will record your actions and generate the test code directly in VS Code. You can also generate assertions by choosing one of the icons in the toolbar and then clicking on an element on the page to assert against.

Check out the docs on generating tests:

#playwrightdev #playwrightweb #playwright #vscode #endtoendtesting #testing

[cheema]

It is always refreshing to watch a video from someone who likes their job. The positive attitude is infectious.

Playwright is an awesome tool. And it is being managed by the right person. Thank you Debbie!

[paulhammond]

The work you and the team are doing here is fantastic. Great work!

[lobaco]

Can't wait to start using playwright. Hopefully, next week. Thank you so much!

[ladislavvarga]

Are you planning adding some custom type locators priority to the vscode generator?
eg. Because of previous framework we have ability to add the ".aid-xxx" CSS tags to almost to every component eg. ".aid-close-button". It would be great if we can set the as the highest priority during code generation. It is not crucial, but it will help us generate some skeleton of the test. Right now the generator is not so good if you use some frontend framework. With these custom tag the tests are language resilent etc..

[atairabbi]

I am dealing with "React Material UI elements", sometimes elements are really complex.
Could plz you provide a video for complex "React Material UI elements"?

[TestAutomationTV]

Code generation from VS Code spits out JavaScript only. I had a C# file opened in the editor when I hit the record button. It said no Playwright test was found. This means no recording. Codegen worked when I tried it from the comomandline.

[egalanos]

Is it possible to configure the plugin to only start the recorder after executing global setup & before code?

I'm testing a heavy PWA where our existing setup code loads the app, logs in, etc before running test cases.

It seems that it can only start a fresh test?


Also suggestion for video editing: it would be much better without the distracting background music. Background music is particularly annoying on higher playback speed.

[lucasxavierlucas]

what do you guys do when you click 'record new', the chromium is opened, but the code gen menu is not being displayed?

[MrNunio]

Hey ! :) I'm doing all this but can't see the assert options on the browser..
what might be the problem?