Page Object Model in Playwright

A comprehensive, yet beginner friendly guide to using the page object model in playwright.
Repo for the Code can be found here: github.com/CommitQuality/Play...
Website used: computer-database.gatling.io/...
Link to vs code extension video: • NEW Playwright Test Vs...

[@user-fx5kv5jv1t]

many thanks to your tutorials!

[@sankaranarayanan5700]

Great tutorial expecting for a full framework video with fixtures and other configurations

[@elcancion]

That sections idea sounds good

[@vadriverlife]

Thank you for your videos. You are the best explainer on KZbin. The approach you explained in this video definitely helped me in my work. The only thing I am wondering about is: does class inheritance work the same way as import?

[@CommitQuality]

Thank you for the support! - No they are different, however your usually going to import to use class inheritance. Inheritance allows you to reuse the functionality of an existing class without rewriting it. The child class can extend the functionality of the parent class by adding new methods or overriding existing ones. To use class inheritance you would use the extends keyword. Imports in TS are used to bring in functionality from external modules or files into the current file. They allow you to access variables, functions, classes, or other constructs defined in other files or modules.

[@RobertKempf-gy2ql]

Do you know if it's possible to use page object models with Playwright's codegen feature? We find codegen to be great for writing tests quickly, but it can result in some ugly code. It would be great if you could record tests and have it use the page object model you define.

[@mariuszpodgorski6695]

Good one

[@robmorris5732]

Hi, great tutorials. Will you be doing any API specific tutorials in the future, how you handle intercepting requests / mocking API calls in your tests?

[@CommitQuality]

Thank you! Yes they are definitely on my list of future videos. They will be coming :)

[@KevoStorm]

is not dangerous use the methods of playwright indeed your own methods? What happend if tomorrow playwright change the name of "page.locator()" ? it's a question because selenium for example when we use selenium's methods we create a BasePage to contain all the methods( what we usually use) like a wrapper class to prevent errors in the future to new release of selenium for example. Are those good practices?

[@davidplews1347]

A great series - its been very easy to get my project off the ground. I am struggling with something though. I have two (some times 3) systems that I need to open in tabs and jump between them. There is allot of code out there showing this - but I am missing how to achieve this using page / fixtures pattern you have here. Any advice greatly appreciated!

[@CommitQuality]

Thank you! Funnily enough I have a multi tabbing video going live today. If that doesn't answer your questions, let me know and I can do a follow up video

[@davidplews1347]

@@CommitQuality - utterly serendipitous! I will be keeping an eye out for it.

[@red_pandaaaaaaaaaa]

hey) great tutorials! maybe you know, how to avoid of RangeError: Maximum call stack size exceeded when running playwright test?

[@SJ_10]

Amazing explanation of the POM. Could you please explain on how to implement before and after hooks in this approach? Example : having a common file with hooks to extend in the test cases maybe?

[@CommitQuality]

This Hooks video may help: kzbin.info/www/bejne/goubaYBmn5tootU Typically you would scope your hooks into the same class as the tests, however if you want to encapsulate your hooks, the best bet is to turn them into fixtures (heres a video for that example, explaining the benefits of using fixtures over hooks): kzbin.info/www/bejne/Z6jHZpmAi6looKc

[@olesnikaniuk6008]

Great explanation! But I have a question. Using expect() inside the class isn’t bad practice?

[@CommitQuality]

Good question. I personally believe that it depends on what you are doing and how you name your methods. There are definitely cases where you shouldn't have assertions inside your POM classes, the main reason is if it makes your tests harder to understand. Additionally, If you have a method called ClickButtonX, and that has an assertion inside it, I would be concerned that it's not visible to the reader that some expect is being performed. On the other hand, if you name methods correctly explaining what's happening and have an assertion that you are repeating multiple times, having that inside a method could keep your code cleaner, maybe you want to parameterise values to assert to check the count of validation messages etc.. of course, this is all subjective and it's always useful to have things like this discussed within your teams and have coding standards for these.

[@imperuminate]

thanks

[@olesnikaniuk6008]

Thank you. How would you recommend to split the huge Page Object ?

[@CommitQuality]

Good question, For my large projects I order everything by Pages and sections - So inside the Page Object Model folder I have a Pages folder and a Sections folder. I order my sections based on logical grouping on the page (This will change depending on what website you work on). Another way is by working by pages, but instead of having sections, you could have a components folder and any pages that make use of a given component import that into their page. Its the same steps as what we went through in this video, but a different way to organise your POM

[@HayateTsukii]

Hello! I have a question. There is the way to implement POM nad Singleton in the same project? Is it worth or not and why?

[@HayateTsukii]

and there is any sense to create private fields in pages class and set locators in constructor? Besides constructor in the class there are only page object, locator private fields and actions methods.

[@ChrisPTY507]

Very similar syntax to test cafe. Looking to learn playwright and doesn’t seem to difficult if I already know testcafe

[@CommitQuality]

Yeah it's a great framework. It was built by the team who created puppeteer, a lot has been taken from that too.

[@thepenlover7867]

Hello.. Great tutorial. Thank you I have one question about creating objects of page classes in our tests. Is there a way that we can avoid creating objects of page classes every time we write a test? We can directly access the page class location & methods by using page class name ?

[@CommitQuality]

Thank you! Yes, you could do that via creating fixtures for each page. kzbin.info/www/bejne/d6fQfGZrgbalmJI this video should explain that for you

[@planktonblooms]

What are your thoughts of gherkin cucumber and playwright please? Are there any issues which i need to look out for please?

[@CommitQuality]

This is a great question. I am a big fan of BDD, if done correctly in a company. I really see the benefits of using tools like cucumber to aid BDD, however many times I have seen BDD tools being used, but no real BDD process being implemented properly, which ends up leading to an overhead of maintaining gherkin (feature files) that no one reads. I have set up frameworks with cucumber and playwright and the main issue I found was I much prefer playwright test as the test runner, everything you get out of the box and the configuration was so much more beneficial to me than using the cucumber runner, I do plan on videos in the future with cucumber and playwright, however personally I now try to stick to using playwright test and only implement bdd tools if a client / project really want to work using BDD as a process

[@matthewsmith7606]

Im curious, is there an advantage/disadvantage to making the selectors/locators functions vs initializing them in the construct via this. and calling them in other functions?

[@CommitQuality]

The reason is stick to creating them as methods is for consistency. There are times I will pass through a parameter and build the locators using the params. I use this a lot in my projects so I keep it consistent.

[@matthewsmith7606]

@@CommitQuality That makes sense, thanks. I feel like you see most PoM examples initialize them in the constructor. I guess that reduces maybe the class length but I can see where it limits potential functionality. Sidenote: Do you have any example repo's of larger PoM setups for playwright?

[@Funkytrip73]

@@CommitQuality In addition, I would say page objects enable proper reusability of your functions and keeps all the little waits, checks, loops, extra logging and other shenanigans that you may need in your non-responsive real-user-real-hardware scenarios out of the test spec ;-)

[@ffgaming-fe3cx]

how to find multiple elements using python? which locator or selector should i need?

[@CommitQuality]

Use all to get them all playwright.dev/python/docs/api/class-locator#locator-all

[@LouiseHarney-pb7ms]

Hi! In the video when importing the class you say "these could all be stored in index files as well so you don't have to import them each time like this". Could you please explain that a bit more or let me know if that happens to be on another video?

[@CommitQuality]

I dont currently have a video on this, however this will definitely be something I can cover when I create a typescript tutorial series. It will apply to any test tool used

[@LouiseHarney-pb7ms]

@@CommitQuality great, thanks!

[@The4m3r]

Hi Jarad, I really like your tutorials about playwright can u plan in future to add video about cookies and local storage with playwright, how to setup and use them with login process ? Thank you.

[@CommitQuality]

Thank you very much! Yes of course no problem. I will add it to the list and get one created :)

[@FlashTracer]

Thank you so much for the video! I wonder how to validate page's URL after click on "Create this computer". I know it's possible in PlayWright by ".toHaveURL", but the question is - how to validate URL with POM? Is there any locator for page's URL? Is it even possible in POM?

[@CommitQuality]

You would likely just want to create a method that does an assertion and then you could call that method that lives inside your Page object file

[@FlashTracer]

@@CommitQualitythank you so much!

[@victortest-cz2qp]

Can you share the code to take look on github or something?

[@CommitQuality]

I have just created a new repo with the code for you - github.com/CommitQuality/Playwright-PageObjectModel-Example

[@NguyenHoang-dq1mk]

Thank you. Can you upload video about Page Object Model with Fixture?

[@CommitQuality]

Yes, certainly. It's the next video to be uploaded I just need to edit and upload it (should be within the next few days)

[@chaostrader]

Let's learn POM. It's simpel they say. Im only even more confused now. All I learned from this video is that you can have 1 simple file with 8 lines of code that almost evry1 can understand. But with POM u can do the same with 6 lines, 2 maps, 4 other files with in each file 20-30 lines of code. Yah made the code "better" 🎉 And yaya blah blah its for bigger files and this and that. No thnx 😒

[@romanh2142]

sorry but ur setting a bad example for working with elements. Wrapping everything into a function is not good. Especially a single action functions like .click() you will end up with a function for every possible action for an element. (click, double click, hover etc)

[@CommitQuality]

Yeah maybe not single actions, if I said that then that would be a maintenance nightmare, but other commands grouped together e.g. adding a computer should be wrapped because it's likely you will use it more than once in a real e2e example. Of course it depends on your scenarios.

[@MrShikaga]

Interesting point, but I don't think I agree Roman. For me there should be separate function for every user behaviour. If there is a particular behaviour your application your application implements on double click or hover, you want those to be separate function calls. For example, if single click adds a computer, but displays a tooltip of on hover, I would expect to write ` await computersPage.clickCreateNewComputer() await computersPage.assertComputerAdded() ... await computersPage.hoverCreateNewComputer() await comptuerPage.assertTooltipShown() ` That said, I am sure there might be a better way, could you provide an example of what you mean?

[@Eiston14]

Great content, Thank you!! I'm totally new to typescript. So could you please explain why we define locators as an arrow function and not as a variable? `myLocator = () => this.page.locator("#id");` // calling -> this.myLocator().fill("Hello"); vs `myLocator = this.page.locator("#id");` //calling -> this.myLocator.fill("Hello");

[@CommitQuality]

You can use variables and that will be completely fine too. I like to keep consistent and not change my approach so I ensure I declare the property as a function as it gives us more flexibility. There are many cases I will want to pass parameters through to my locators and make them reusable that way