带有节点、ES7、puppeteer 的页面对象模式

Question

我最近开始使用 Puppeteer 进行 e2e 测试（我对 Selenium Web Driver 有一些经验），但在讨论 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？我会使用import 吗？我只是在寻找一个基本的“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);

})();