Getting Started with Playwright and VS Code

hey everyone let's get started with playwright using the vs code extension now I've already created a folder called getting started there's nothing inside it and I've just opened it up in vs code now from here I'm going to use the vs code extension to install playwright so first let's go to the extensions and search for playwright and this will give us all the extensions available so make sure we look for the one that is verified by Microsoft from here you can install playwright test for vs code as you can see I already have it installed and then we can install playwright opening the command panel and typing in install playwright you can see this is recently used so it's coming up here for me once I click this it's gonna then ask me which browsers I want to install now at playwright we can test across all browsers so I can choose all of them or I can specifically only have chromium or Firefox or webkit for now I'm going to leave them all set now we use typescript by default but if you don't want to use typescript you can use JavaScript by just clicking here however we highly recommend you use typescript as it does give you better IDE support and you don't need any typescript experience in order to write your test with the TS extension and this is one of my favorites add a GitHub actions workflow so just by leaving this checked you can have a GitHub actions workflow meaning your tests will run on GitHub on every push and pull request now if you're not using GitHub playwright works on any other continuous integration so no problem at all let's press OK and let playwright install everything that it needs to install all the browsers and everything else and there we go happy hacking let's take a look at what was installed so over here in our files we can see our GitHub folder we've got that playwright yaml file where on push or on pull request on branches main or Master it's going to install dependencies install the playwright browsers and then it's going to run the playwright tests so that just works for us amazing node modules folder containing everything it needs to contain and then the test folder now this is the main folder that we're going to use for adding all our tests we have an example test in here which we'll come back to in a second so basically make sure you're writing your tests in your test folder we also have a test examples folder and in here we have a demo to do app and all the tests written for that and you can check those out in your own time and play those tests as well by literally just putting this into the test folder and then you'll be able to run those tests like we will do with this one in a second we gotta get ignore and then our package Json which will show us the version of playwright installed and then our playwright config now we don't really need to do much with the playwright config because everything works out of the box but in case you did need to do something like require.nf or maybe you want to change those projects and remove Firefox or I would even already have it or add a pixel 5 device or an iPhone 12 or Ms Edge for specific browsers or maybe you want to run a local Dev server before starting the test and you could just uncomment this out here and then it will set that up for you okay let's get going and running our first test so the example test two very simple tests in here what we're doing is we're importing test and expect from playwright test now our first test basically is checking that it has a title so it has the page fixture here which is coming from playwright and it's importing this in here so we have access to it and we're basically saying await the page and then go to playwright.dev so go to this URL and expect a title to contain a substring so expecting that this page has a title of playwright and this is like the meta title so we'll look and see if that meta title contains the word playwright now our next test to make sure that the get started link goes to where it should go so again we import the page uh fixture and then we await the page and then go to our URL and then we're going to click the get started link so we're going to await page and then get by roll we're going to look for something on the page with a roll of a link we want the row of links ahref equals for example I want to make sure it has the name of get started so the link should have the name or the accessible name of get started and then we're going to click it and then we'll expect that the URL contains the intro so expect the page to have the URL of intro so let's have a look to run our tests we can press this green triangle here and this is going to run our test for us it's going to open that browser window run the test and the test passed so you can see here the test pass 1.1 seconds super fast so the browser opened because I have show browser clicked here now if you don't have this checked then it's not going to open the browser so make sure that's checked and you can close all browsers at all times here or close it manually so we're going to run the second test and I could leave that browser open but I want to show you how it's going to open up this browser so we can see it so let's run this test now and we open that browser again you just briefly saw that page and then it went to that intro page so that test again is passing super fast um playwright is too quick and you miss it so um this is really cool now what happens if we want to run our tests on another browser we install those browsers well maybe we want to install in Firefox so we can select the default profile come along here and maybe say Chrome is by default and we want Firefox instead so we're going to run that and I'm just going to close all browsers for now so we can see what's going on and now I'm going to run my test again and this time the browser that's going to open up is the Firefox browser and you can see that here so there's our test running on Firefox and again we can do exactly the very same with webkit we can just select webkit and we can run our test and this should open a browser with webkit I hope we scrolled across here this opened on another window so I'll just pull it across and there we have our test run on webkit again we can run it on all those by basically selecting all of them and now it's going to run the test on all browsers so now you're going to see it open up the Chrome one go through that test open up the Firefox one it'll go to that test and open webkit and do that test again when you're in development mode you might not want all of those um so probably just want to select Chrome and then later on check on the others as you need and that's how to get your tests running in playwright so see you in the next video for more we'll go into debugging and then we'll go into generating tests uh Happy testing have fun

Channel: Playwright

Views: 48,469

Keywords: e2e, javascript, playwright, testing, typescript, vs code

Id: Xz6lhEzgI5I

Length: 7min 23sec (443 seconds)

Published: Fri Jan 27 2023