End to End Testing with Playwright

[00:00:00]
>> So, when you're doing end-to-end testing, you want to be basically pretending to be a user. And that's why it's called end-to-end, because you wanna test everything. And notice how it would be difficult to create an end-to-end test that actually asserts that your clustering algorithm actually works correctly.

[00:00:18]
It would be a hard thing to do. It's possible, but it would be hard. Also, it would be slow, because these end-to-end tests actually require that you perform navigation to a particular page and you see the correct result. So, typically we use some tools for it, and Playwright, I think, is one of them that's most popular these days.

[00:00:40]
And I think it's one of the best in terms of, all these tools kind of learn from the mistakes of the previous tools. This is the latest one, and it tries to provide the highest level of experience. Playwright right now is kind of popular, it is from Microsoft.

[00:00:57]
It's pretty cool, anyways.
>> We do have a full course on Cypress, and then we also-
>> [LAUGH]
>> In the Enterprise UI Dev, Testing and Code Quality, which is a full course, we have a section on Playwright there, and Steve teaches both of those courses. I'm pretty sure in the Enterprise Playwright, he discusses the differences.

[00:01:21]
>> [LAUGH] Perfect.
>> So, there you go.
>> [LAUGH]
>> Perfect, so now with Playwright, we really wanna make a test for this particular component. Let me just go over the component here. Why isn't, okay, here we go. Sorry that's, right. So, okay, we have a component. This component represents this page right here, right?

[00:01:48]
So what we have on it is we have a page, we have a form where you can change your values over here. I believe if I run this, If I, for example, pick a wrong value and I hit, let's see, it validates, right? It shows me errors. So I can only do specific range.

[00:02:12]
I believe the same thing happens on a distance if I do, etc. So there's validation that is happening in the page as well. So presumably, we would like to check all of those things. All right, so let's do an end-to-end test. And we're talking about Playwright. So let's install Playwright.

[00:02:31]
You go here, run the command in a command line. And that should initialize, test sounds good. Okay, so, Playwright is gonna set up a runner for us, Playwright test, so then we can just do test e2e and essentially run Praywright. So how do we create tests for Playwright?

[00:02:53]
So, remember that Playwright pretends to be user, essentially. We are bringing up a real browser that does real work to perform all these operations. So the first thing we have to do is we have to make sure that our server is running. So let's start our server. And then, Playwright created a test folder, and in the test folder it created an example test for us.

[00:03:19]
So you can see that has titled tests, you navigate to a particular page, there's lots of awaits in Playwright, because everything's asynchronous. And then you can expect that a title contains a particular word inside of it. So we're gonna do something similar for our page, Let's just copy their input statements.

[00:03:42]
And let's make a new test here. So cluster.spec.ts, and in here we would say test. So let's say we wanna test our title, right? So we navigate to a page. And we say, Page. Go to Yes, here we go. And let me do URL, go to Well, we're not gonna go here, we're going to go to this page right here.

[00:04:34]
So we have to await this, and then we say expect. They all await as well expect. That page Title is title. To contain, what is to say this is called Chicago traffic accidents clustering, okay. To, to, To, they have title, no. To, To have a higher level of think, okay, All right, so let's see if we can run this.

[00:05:27]
So to run it, we do our test.e2e. Oops. And we have failed our test. Now, you probably want to actually debug it. So there's a special way to run it into the debug mode. Let me show you how that works. Yes, this is the report. So let's do that.

[00:06:02]
So, when you're in a debugger, you essentially kind of get a debugger window, and here's your test. So in our case, we had our s title cluster test, and I can go and run it and I can see what's actually happening inside of Playwright. I can see that it's failing because expected string is clustering, but the actual string is much longer.

[00:06:27]
So if I go and I change this in our test, Then we should be able to rerun the test and it should pass. And so, you can see that what Playwright has done is they have done a much better job of kinda integrating everything. So you kinda have an IDE around your browser and you can go and poke at it and see what is happening.