javascript - 带有 Node 、ES7、puppeteer 的页面对象模式

Question

我最近开始使用 Puppeteer 进行 e2e 测试(我对 Selenium Web 驱动程序有一些经验)，但我在文档中找不到任何讨论 POM 模式的内容。是否有任何示例可以如何在 Puppeteer 中的 Node/ES7 中正确实现此功能？

假设我有一个简单的脚本来测试页面的登录功能:

(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');
...
}();

通常，我们会有一个用于登录页面的页面对象模型。我如何为上面的页面创建一个基本的 POM 并将其与我的脚本集成？在这个环境下你会如何调用我的测试脚本中的POM？我会使用导入吗？我只是在寻找一个基本的“hello world”示例。

Answer 1

在最基本的层面上，POM 声明每个页面都有自己的类，其中包含与该页面交互的实用方法。

为了使用 Puppeteer 实现此目的，我们使用 ES6 类来创建包含各自页面实用方法的类。

文件夹结构

test/
  main.js
  pages/
    - HomePage.js
    - CartPage.js
    - ProductDetailPage.js

HomePage.js

export default class HomePage {

    constructor(page) {
        this.page = page;
    }

    async getTitle() {
        return this.page.title();
    }
}

ma​​in.js

import HomePage from "pages/HomePage";

const HP_URL = "https://google.com";

(async () => {

    await page.goto(HP_URL);

    const hp = new HomePage(page);

    const title = await hp.getTitle();

    console.log(title);

})();