Page Object Model with Puppeteer

I 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.

[JoelEinbinder]

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

async function login(page, username, password) {
    await page.waitFor('input[id=userId]');
    await page.type('input[id=userId]', username);
    await page.type('input[id=password]', password);
    await page.click('button[type="submit"]');
    await page.waitFor('p.success-msg');
}
module.exports = { login }

test.js

const {login} = require('./page');

async function test(page) {
     await page.goto(url, {
        timeout: 5000
    });
    await login(page, 'John Doe', 'password1');
}

[JoelEinbinder]

@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.