[MUSIC]
>> Hi, welcome to Visual Studio Toolbox.
I'm your host, Robert Green.
>> I'm your other host, Leslie Richardson.
>> I'm your guest, Phil Japikse.
>> We are now at the end of our,
we call it a mini series,
but it's a little bit more than mini,
to our series on automated software testing.
We've now reached the end of the mega mini series,
and today we're going to close by talking
about UI testing of web apps with Microsoft Playwright.
>> Yeah. We've talked all about testing code directly,
testing our data accessory through integration,
and what we haven't touched on is
how do we automate those UI tests?
>> Yeah.
>> That's also very important.
I think in the first episode we talked about where QE fits in,
and where QE really,
in my opinion, provides the most value,
is that overarching, testing the system as a whole.
Is it behaving as a customer expects?
We can get all the Lego blocks working, but again,
to try and get the Millennium Falcon or
the submarine door correctly,
we need somebody with that big picture view.
Playwright, and I'm not sure how long you said you demoed it,
not too long ago, I recently discovered it.
I don't know how long it's been around.
>> At least since last year's build.
Build 2021.
Did a demo of it on the Scott Hanselman keynote.
That was like Office cringe now.
>> That actually might be where I saw it the first time.
>> Yeah, it was really cool.
I remember thinking that's pretty sweet.
>> Think of Selenium or
those different frameworks to automate tests,
but those are mostly JavaScript framework.
Playwright allows you to use JavaScript as well and TypeScript,
but it also has a C Sharp component.
You guys see C Sharp code to drive the tests,
which I'm a C Sharp developer.
That's where I prefer to be.
There's a couple of things we have to get installed though.
I have a little read me or
playwright.text here in the GitHub repo,
and you got to make sure Node.js and npm are up to date,
and once you do, then you just do npm install Playwright.
Now, I will let you know this was a surprise to me.
If you update the NuGet packages for Playwright in your project
and don't rerun npm install Playwright, everything will fail.
>> Oh, that sucks.
>> Because the updated NuGet packages were expecting
the Chromium browser extensions to
be in a certain location and
I guess maybe they moved or something.
But once I re-installed Playwright,
everything was fine and just worked.
That was something I discovered just
for flying out here to do a series.
It made me a little nervous at the time.
>> Is Playwright only
Chromium browser compatible or for people using Firefox?
>> No, I know you can use Firefox and then you
can use Chrome, I think it depends.
If you want to use additional browsers,
you have to install the extension.
>> At least there are those, yeah.
>> I'm not an expert on UI testing.
When we get into it, I'll tell you how we use it.
Once you have it installed,
if you're just going to play with it,
you can just have a normal console application,
with Program.cs, and bring in Microsoft Playwright.
If you're going to write automated test around it,
you want to use something like xUnit to
drive it, then guess what?
We use our xUnit framework or actually a template,
and then all we have to do is add Playwright into it.
Let's look at how playwright works and it's your typical,
again, this is a very simple demo.
You're going to create an extension,
you're going to open a browser,
you're going to look for certain things in the browser,
whether it's by id or CSS class,
or use a CSS selector,
then you can act on those things.
You can do a click,
you can type into a field and then you can verify,
like if it redirected,
you verify, it's all the things you can do a web testing.
Which is great, but it's also one of
the things I know we were talking before we started
the episode is one of the downfalls of
web testing is graphic designer
comes in and starts printing it up,
changing class names and things like that,
now my test start failing.
They are more fragile than typical unit tests.
But I still think it's a very important part.
What I'm going to do is we'll just step through
and either I start it up.
>> Now this is like a first impression for a lot of customers
going to anyone's site and stuff.
The UI elements laid out, it doesn't even work.
It's going to change the fact whether I end up buying something.
>> We have thousands of learning
pages for different case types and case subtypes.
One of the things, when I took over this job,
almost three years ago,
I got really nervous going,
how do we make sure all these things are up and running?
What we're doing is recombination using some services in Azure,
but also we set up a function app
that just goes out and pings all of our tests,
and it said is a logo here.
If it is great to sites up and running,
every can rest assured.
Because you typically are
the last person to find out when something isn't up and running.
We're going to create an instance of playwright itself.
You can't see it. Oh,
I ran the whole thing because I hit F5 instead of steps through,
my bad. We'll do it again.
>> It's a teaser.
>> Yes. Wow,
you guys are watching me hit F10, right?
>> It's hard to tell what you pressed, but I feel you.
>> Yeah. You actually have to work for it.
Okay. Sorry, that was me being an idiot.
That probably exists between a keyboard and a chair,
that was using statement.
>> Yeah.
>> Let me actually get down to a non using statement because,
boy, I think I was new to development.
>> Fun fact you, can drag and drop your break points.
>> You can, yes.
What I have done is I've created an instance of a browser,
and we'll put this over here,
and we'll do this,
and this, and hide that.
I'm going to go to Google.com.
Now, you can barely see it,
but right here it's asking me to log in.
What Google has done is popped up
a new frame and says, "You want to log in?"
It's blocking my input until I respond to that.
I've actually handled that here.
I say get me all the frames,
and if I have more than one,
that means I've got this login screen.
Then I look for the word that says, no thanks.
>> That's awesome.
>> I'm looking for no, thanks.
Let me pin this back over here and then I click it.
Now I have just dismissed.
I'm going to force you to log in.
>> Conversely, if you wanted to log in,
could you endpoint either
manually or could you hard code or not hard code?
Yeah. Essentially, your authentication.
>> Yes.
>> I'm saying you don't want to.
>> I mean, not that you wanted to ask.
>> Right. No, you should.
>> But let's look at it this way.
What if you use Azure Key Vault to hold it?
What if your testing was important?
You could actually put your secrets in
Azure Key Vault to then pull it down
that way because you're just running
CSharp codes and then you can put it that way.
>> That's pretty sweet.
>> I'm not a security expert,
I'm not telling you that it's 100 percent secure.
Let me put this disclaimer in there right now.
>> I feel like that's slightly better than hardcoding your password.
Just a little bit.
>> We're looking for something that has the aria label of search
and then we're going to fill it with
the letters or the word Playwright.
When we do that, you see Playwright is right here,
Type Ahead is working with
Google and then I'm going to run and wait for navigation.
Basically what I'm doing is I'm saying,
go ahead and hit "Enter" right on this box,
which then will pick up the "Enter".
Let me run that right there.
Then I want to find the XPath that
contains playwright fast and reliable end-to-end testing.
Here's an example.
If the playwright homepage changed their H1,
I'm not finding it anymore.
Then I'm like, click that.
Now I'm on the Playwright page now I'm looking for the text
gets started right here and I'm going to click.
>> Which is case insensitive.
>> Case insensitive. Now I'm on the installation page.
I'm going to take a screenshot.
The path is here.
Now I have a screenshot.
I do a read line because I'm really old school.
I know Visual Studio will say,
do you want to exit the program?
But I can't get away from doing
the read line at the end of a console app.
Then if I look, here is my snapshots of the page.
>> That's pretty sweet.
>> That's how to run it.
Let's talk about how we make a test out of it.
Let's go in and it's the same code,
just a little different flavor.
By the way, there's
an update to Visual Studio. Should I install it now?
>> Sure, why not.
>> Give it right now?
>> Yeah. I did earlier. It's a pretty quick one.
>> This is really the same,
not really the same because it is the same code
with a few twists put in.
Here's my fact, verify Google search for playwright.
This is the same, this is the same.
I'm navigating.
I'm dismissing my sign-in.
I'm awaiting for the fill,
but then I get down to here and I'm
asserting that's the page that I got navigated to.
This page URL, I can find different options then I
click that and then I assert that the page URL is this.
I think I go deep in his demo.
But again, if you're doing a health check you go,
is this image here?
Is this label here?
Great, go away.
If it's much more involved and you can record,
I haven't done that,
but you could actually set recordings up to reply.
>> Which actually is a way of in
many cases getting around the fact that the page may change.
I just want to make sure that when I click
"Getting Started" I go to the Getting Started page.
Whatever is on that page I got nothing to do with.
My tests are not going to fail just because you changed that page.
You might want to do some smoke test D type thing,
but as long as I go to that page,
then my UI test passes
because that page could change over and over and over again.
>> I know some people,
a lot of UI testing experience and they're
probably throwing things at the computer
right now because I said I don't do a lot of it.
It really is a very distinct skill that I don't have any,
and also I don't have full-time QA on my staff.
I have a development team. We also do QA.
We also do requirements.
It's a true delivery team as I like to call it.
But if you've got a big enough organization
and I've consulted in some but they do have
QA departments and they have
very complicated scripts because maybe it's not changing.
We're now released and we just want to make sure you know
your large grocery store and if you
navigate to search for bananas,
now, does it come up with where the bananas are
located and if they're in stock and things like that.
I'm not downplaying it.
It's just we've got a small enough organization
that I had to make decisions as to what I'm testing
and I'm going with the unit testing and integration
testing over UI testing except of course for the smoke test.
But I've played with selenium in the past.
I never really got it because I'm not having a JavaScript.
I have just enough JavaScript to get by,
but I really like Playwright. It's all CSharp based.
It all made sense to me.
I have IntelliSense, Page dot,
Click Asynch, and then it
actually prompts what do you want to click?
>> If you did nothing more than check for busted links,
if that's all he did with this,
because you've got a page spin up for awhile and
once a week you can run this or
once every X number of days or whatever,
run a bunch of scripts that go to a page,
click on all the links just to see what links have broken,
that would be an awesome use of this.
You write it once and then you just fire it off on
a regular basis and once a week you
get report all the links are working or guess what?
These three links are broken.
I don't know when, doesn't matter when,
but right now they're not working go fix them.
>> Because you wouldn't even have to hard cod the links.
You just say, give me all the links on
the page and you loop through the collection.
>> Exactly. That would be a good use of this as well.
You don't have to go into full-blown UI testing
of every single text box in drop-down and whatnot.
If you did nothing more than this that's pretty useful.
>> Well, and again, it's very tool for a job like,
what do you need in your organization?
We need to know that
our hundreds and thousands of landing pages are up.
It's easy to tell when they are up
because we're getting leads or we're getting information.
But if we're not getting data from particular landing page,
is that because it's down or because nobody's hit it?
Now a human has to go look.
>> You can be looking at your numbers or how many people are or
look what's the traffic like from one page to the next.
If no one's on going to
a specific page that you want people to go to it's like,
is it because we didn't market it well or something or
is it because there's some disconnect somehow?
>> Can you as part of this detect
how long it took pages to load, etc?
>> Yes. Do I have an example to show you?
No. But I remember when I was dig it into this.
>> Because that would also be
a very interesting automated tests to run on a regular basis.
Just click on every single link,
load every single page,
and tell me which ones take
more than five seconds to load because that could be why
no one and responds to that page if it
doesn't load it in in a reasonable amount of time.
>> That's true. I presume so.
If nothing else,
you put a timer here,
and yet compare the difference.
But if I recall correctly,
there was something built into
the framework to actually do that for you.
>> Then you could presumably as part of
your test assert that the page took
less than five seconds to load and if it
does this test fails, you do something like that.
>> You get a whole response.
I'm going to say yes, there's something
filtered and I'm not going to
waste camera time right now digging through IntelliSense.
You get all properties coming off that response.
Just like you can with an API request I presumed that you
can also do that with a UI request.
>> Cool.
>> That's what I got.
>> That's nice.
>> Sweet.
>> That wraps up our series on automated software testing.
>> The mega mini series on automated software testing.
>> Hope you enjoyed that.
Thanks for watching start to finish, which hopefully you did.
>> Any concluding thoughts before we wrap up?
>> It's really important to know that
your code is doing what you expect it to,
and if you're spending
all your time hitting F5 as stepping through
code you're not delivering new features and
new capabilities to your customers internal or external.
The more you can automate this the more
you can feel comfortable with making changes,
the better your life's going to be. It's quality life.
It's not just quality of code,
it's quality of life because you're not going to be,
I can get that call at
four o'clock in the morning saying the site's down,
if it's something that you could have
tested. I'll get off my soapbox now.
>> Awesome everyone. Thank you so much for being here.
>> That was fun.
>> It's also exciting that all of this code that we've been doing
for 11 some episodes is
going to be available for anyone in the show notes.
>> It will probably be,
I can actually show teaser.
If I go to github.com and I go to schematic,
which is me, you
can't see right now because only get it
loaded first and I'll bring it over,
and then go to software testing.
Look at that. This is where it's going to be, right there.
>> Here we go.
>> Schema.com or github.com
schematic as this paramedic and then software testing.
Right now you can see it's empty because I
only created but I'll be checking in shortly,
probably from the airport,
and we'll get all the code out there. [inaudible]
>> By the time you're watching this it should be filled.
>> It will be filled.
>> It will be.
>> Awesome. You're also
on Twitter, or like, how are going to talk to you?
>> I am on Twitter. I'm on Schematic at Twitter,
scheme advocate, outlook.com, pretty much I'm skimedic anywhere.
Skimedic.com, and that's ski isn't
snow ski, medic isn't paramedic.
We'll do the old ski handling trick.
We'll bring up Notepad,
and we'll bring it over here and we'll
type skimedic in really big letter.
That's GitHub, that's Twitter,
that's LinkedIn, that's Facebook.
I am on Instagram now.
I have no idea what my handle is because I've just joined.
That's the best way to get a hold of me.
>> Excellent.
>> Great.
>> That's it.
>> That's a wrap.
>> See you next time on Visual Studio Toolbox.
>> Bye, thanks for watching.
[MUSIC]