Playwright - Turn Page Object Model Pages into fixtures

Playwright Tutorial for turning Page Object Model Pages into fixtures. This is the preferred approach when using Playwright test and page object model

[LouiseHarney-pbms]

I wanted to give a small super thanks. Its not much but you have really made my life so much easier than if your channel did not exist.

[randolphcarter]

Tis' so cool and clear! I thought I could never understand how to use it. Thank you!

[hocltbn]

This becomes tricky when you need to handle multiple pages of an app and you need to rename type computersPage for everytime you need to call in same tests ( say do something on a page, click a link, takes to another page tab, again another one... ). If separated as each test, then this approach is good. Though lot of tests to be written.

[tomekmielnik]

The code is soo clean now! Thanks for the example.
How to handle a new tab with this approach?

[AnonYmous-kfuu]

I need to pass in 20+ fixtures into my tests. Is there an easier way than having to add them all to every single test? 25 fixtures in 15 tests is going to look so ugly and repetitive.

[lukecage]

let's assume we have a long list of pages to be added in the base.extend.. how can we deal with it? can we split fixtures in multiple files ? How to do it correctly?

[sshah]

Thanks for the useful info. Can you please provide an example using beforeAll hooks with these POM fixtures?

[ofirpardo]

I would suggest instead of defining the types directly, I would create a general type that includes all the POM types inside and then just pass the general type to the extend type as it might be a bit more clear that way.

type myPages = {computersPage : ComputersPages(page)}

base.extend<myPages>({})

[lukamlikota]

Excellent video! Hm.. You got me thinking now. I like this more than standard POM. Problem is we already have standard POM on few of our projects and it would be a lot of effort to rewrite it now 😞

[enrisacost]

Wonder if there's a way to "bring in" ENV VARS as fixtures in PWT?

[nkzkydj]

Thank you so much for such a useful video! ANy idea how this could work with parallel runs? Thank you for your content!

[moshedror]

Great video.
Question:
Can we use several fixtures in a single test?

[LouiseHarney-pbms]

I've followed your helpful videos for the last few months and have created some test files using POM and fixtures. For now we have left our assertions in the tests so I have added the export of expect to my basePage fixture. Locator assertions are available but when I try to do page assertions they don't exist. The error is "Property 'toHaveURL' does not exist on type 'MakeMatchers<void, ExamplePage>. Do you have any ideas if there something I am missing/need to import/export?

[matussvacek]

Hello, thanks for the video. I tried your solution (in JS), but I've ran into a problem, if I use page object models as fixtures and then I go to test file and try to write lets say "await computersPage." I am not getting auto-sugestions for methods that are in ComputersPage file. Is there any solution to that ?

[aparnausa]

could you please explain fixtures in js please.

[umskip]

Why adding one more layer and complexity adding all the pages in the base page and use them as a fixture? Why not use regular POM and call the pages in the tests? Is there any performance improvement in all this? What's the benefit?

[arjunannamalai]

Excellent video.. I have done the similar one in my test framework too.. How does it work If I want to create a new context at the start of every test and delete the context at end of the test coupled with the fixture.. I want to do this because I see a bit of flakyness while I run it in CI if I reuse the same context and page..

[quocthinhluu]

Looks like the file basePage.js will gradually grow bigger and bigger.
Is there any solution to this ?

[pranaymagic]

Hi
I am very new to automation. Just started doing the automation using the playwright with javascript
I need a small help regarding fixtures. Its not like code is not working. Code is running fine but not getting suggestions


I have a fixtures file

import Loginpage_PO from
export const test = base.test.extend({
loginPage:async ({ page }, use)=>{
await use( new Loginpage_PO(page)); }
});

Test file is as following

import {test} from

test('CSR-Login-01: Verify user able to login using the correct credentials', async ({loginPage}) => {
await loginPage.loginCsrPortal();
await
await
})

As I am using VS Code while typing loginPage.
After dot(.) the suggestions(method of LoginPage_PO) not coming up
My playwright version is
{ "name": "consumerreportsplaywright",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC",
} }

but when I am doing like following
import Loginpage_PO from
test('CSR-Login-01: Verify user able to login using the correct credentials', async (page) => {
const loginpage_PO = new Loginpage_PO();

})

I get the suggestions after dot(.)
Anyone knows why this is not working when using the fixtures?