Rayrun
← Back to Discord Forum

How to use page object model with electron application

komalplaywright_41381posted in #help-playwright
Open in Discord
komalplaywright_41381

Let's say we have one page class for example map page, there keeping all the selectors. now i want to use map page with electron application script, but i am not able to use it in script.

image.png

This thread is trying to answer question "How can I use the Page Object Model with an Electron application script?"

13 replies

I think what you're needing to use instead of the beforeAll is a fixture.

@komalplaywright_41381 can we see mapPage file? Need to know if you re exporting selector alone or using constructor to pass page into every selector actions

komalplaywright_41381

@sabu9 you can consider this file. Same i used for mapPage

image.png

const callPage = new CallPage(mapPage) await callPage.title()

Assuming CallPage has the page objects related to first script you have, I have written above. If mapPage, then alter it accordingly.

I believe you are not calling the instance of page objects and directly injecting mapPage to unknown.

komalplaywright_41381

@sabu9 sorry for confusion. attaching script file with error and page model screenshot. you can see with first page hovering error. it is not referring my existing page with electron application. it is going with default page. electron application as we know this is for desktop applications.

image.png
image.png

I could see you are cqpturing first window of electron app under callPage. Yet you are not calling the instance of page object you are expecting instead directly using the captured callPage which doesn’t make sense.

2 references export class CallPage f readonly page: Page; • references constructor( page: Page) i this.page = page; }

Hope you pass the page instance whichever you capture by calling instance as you have defined constructor in CallPage

komalplaywright_41381
image.png
image.png
komalplaywright_41381

i used like that.

komalplaywright_41381

However same issue.

Dont use it in beforeEach as you already have page instance. You need firstwindow instance. So

calledPage = await electronApp.firstWindow() return calledPage

test 'Create Event from Commandline @mapview', async ()-> const callPage = new CallPage(calledPage)

// use callPage below instead of mapPage - havent edited below console.log(await mapPage.title)); await mappage.fill('input [name="username"]', 'testinguser4'); await mapPage.press('input [name="username"]', 'Tab'); await mapPage.fill('input[name="password"]', 'password'); mapPage.click('text=Log In'); await mapPage.close;

// for each test say if you are going to have multiple windows in electrin app whenever you click on buttons in it, then everytime you need to make the instance like above and pass the respective page instance.

komalplaywright_41381

Okay Understood. Thanks @sabu9

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.