Generating Playwright Tests in VS Code

Let’s take a look at how to generate a test based on your user actions and then write some assertions. Then we can use the pick locator option in VS Code to pick the locator we want and the record at cursor option to record a test from a specific place in our code.

00:00 Generating tests with Codegen
02:33 Picking a locator
04:41 Recording at cursor

Useful Links:

#playwright #vscode #playwrightdev #playwrightweb

[aslamshah]

The best thing that every happened to E2E is Playwright! Keep up the great work!

[mailsiraj]

beautiful video - clear walkthrough and awesome script generation.

[MrMilesfinn]

Great presentation and super energy. Overall A+ grade.

[Maisonier]

Llegué acá y aprendí de playwright por el scam de Rabbit R1. Al menos estoy aprendiendo algo nuevo. Excelente vídeo, like y suscribir.

[CommitQuality]

Really great video, I put a few videos out on this a while ago and I had a lot of great feedback on the extension! Keep it up!

[LeadershipImranKhan]

That's super awesome! Never seen this before!

[winterheat]

it has gone a long way... from 2008 when IE 6, 7, and 8 were not suitable for even debugging, to nowadays with such automated e2e tests... but then, 15 years have passed.

[Allbbrz]

I went as far as installing the playwright test for vscode but then that was it... clicking the record new it just spits out "no playwright tests found"

[anatoliikostin]

Hey! That’s awesome! I read about this VS Code integration. But seeing it in action helps a lot! I wonder if the same functionality is supported for other languages like python? If not yet, do you have it on your roadmap?

[whitewittock]

I have a problem when I click record it doesn't open a browser. I also tried codegen from the commandline and that told me it can't find the browser, but it's not respecting my global-setup.ts where I specify the executablePath. I have no problem running tests so it's just codegen that's reading the browser settings from some file I don't know of

[jamesdonaldson]

Curious if this could be used to generate tests for an Electron app built with React Native as well.

[socialliveview]

This is probably what Rabits R1 is using and calling it "techmood"

[EMODAV]

Not every event will be recorded. I try it with drag&drop but it record only two clicks.

[LouisCubingChannel]

Dear playwright how should I locate the upload button of twitter, since I gen the code from codegen, and run it said 👾👾[Bug]: Error: Node is not an HTMLInputElement

[Mendez_]

Does the "record at cursor" option runs the test and stops where the cursor is or does it load a snapshot of the browser state at that moment?

[pashagoroshko]

hey, can i run tests in UI dashboard? or only in vscode or terminal

[sumanpatel]

My codegen doesnt capture keystores ! any ideas?

[rockmystyle]

This demo site doesnt exist :( i got 404

[liviugeorge]

the output at failed test is barbaric. what year is this?!
ahhh... another microsoft 2020 "cualiti"...

[liviugeorge]

the "thinking" at 2:59 is plain moronic. you do not(!) want the locator to be an element from the list. there it might be a list of similar elements. clicking on one line mean nothing.
you would want to select the field that said "1 item" and check that its value is 1 item.