Page Object Model with Puppeteer
See original GitHub issueI recently started utilizing Puppeteer for e2e testing (I have some experience with Selenium Web Driver) and I could not find anything in the documentation discussing POM pattern. Are there any examples available how to implement this correctly in node/ES7 within Puppeteer?
Let us say I have a simple script that tests the login functionality of a page:
(async () => {
...
await page.goto(url, {
timeout: 5000
});
await page.waitFor('input[id=userId]');
await page.type('input[id=userId]', 'John Doe');
await page.type('input[id=password]', 'password1');
await page.click('button[type="submit"]');
await page.waitFor('p.success-msg');
...
}();
Typically, we would have a Page Object Model for the login page. How would I create a basic POM for the above page and integrate it with my script? I am just looking for a basic ‘hello world’ example.
Issue Analytics
- State:
- Created 6 years ago
- Comments:6
Top Results From Across the Web
Puppeteer Jest Automation using Page Object Model - Medium
This is a popular design pattern used in test automation. In POM, the page object classes are created separately. These classes contain ...
Read more >Page Object Model in Puppeteer - LinkedIn
Page Object Model helps us to promote reusability and ease of maintenance in our test automation suite when there is a change of...
Read more >Step by step tutorial on puppeteer :: part-4 - Road to SDET
Now we will convert our Practice Form script to page object model. Create a folder named pages and inside it, create a file...
Read more >End-To-End Testing with Jest and ... - JavaScript in Plain English
Page Object Model (POM) is a design pattern, popularly used in test automation that creates Object Repository for web UI elements.
Read more >puppeteer-page-object - npm
Small puppeteer page object pattern implementation. Latest version: 2.2.0, last published: 2 years ago. Start using puppeteer-page-object in ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I am very new to Page Object Model. From what I understand, you can just have a helper file with functions that accept a page object. Something like:
page.js
test.js
@rob4629 Can you file a new issue for exactly what functionality you are missing from Puppeteer? Asking for POM is too vague for me to be helpful.