复杂应用程序的页面对象模型结构答案

【问题标题】：Page Object Model structure for a complex application复杂应用程序的页面对象模型结构
【发布时间】：2018-09-15 10:20:24
【问题描述】：

在过去的几个月里，我使用 Puppeteer 为几个小型项目驱动自动化。现在我想为中型/大型复杂应用程序扩展框架。

我想使用著名的页面对象模型，其中我将定位器、页面方法分隔在单独的文件中，并在相应的页面执行代码中调用它们。

我的目录结构是这样的

e2e_tests
    - locators
        - common-locators.js
        - page1locators.js
        - page2locators.js

    - constants
        - config.js

    - utils
        - base_functions.js
        - page1methods.js
        - page2methods.js

    - urls
        - urls.json

    - screenshots

    - test
        - bootstrap.js
        - page1.js
        - page2.js

我现在面临的问题是我无法让 page 在该特定页面的方法主体中进行初始化。

例如如果我在 page1 中有一个输入框，我想在 utils/page1methods.js 中定义一个可以处理这个问题的方法 - 类似于

module.exports = {
    fillFirstInputBox(){
        await page.type(locator, "ABCDEFG");
     }
}

然后我想在 page1.js it 块内调用它 - 像这样

const firstPage = require('../utils/page1methods.js').
.
.
.
it('fills first input box', async function (){
   firstPage.fillFirstInputBox();
});

我已经尝试过这种方法，但遇到了关于 page 未在 page1methods.js 文件中定义的各种 .js 错误。如果有必要，我可以复制粘贴错误。

我该怎么做才能让我

我能够实现这种模块化。
如果我可以改进这个结构，我的方法应该是什么。

【问题讨论】：

标签： javascript puppeteer pageobjects

【解决方案1】：

您可以返回一个箭头函数，该函数将返回带有page 变量的模块/函数集。确保将整个东西包裹在第一个大括号中，或者手动返回它。

module.exports = (page) => ({ // <-- to have page in scope
    async fillFirstInputBox(){ // <-- make this function async
        await page.type(locator, "ABCDEFG");
     }
})

然后将变量传递到那里，

// make page variable
const firstPage = require('../utils/page1methods.js')(page)

就是这样。现在所有函数都可以访问页面变量。还有其他方法，例如扩展类、绑定页面等。但这将是您所看到的最简单的方法。如果需要，可以拆分。

我们已经成功了一半。这本身并不能解决这个问题。由于 async-await 和类问题，该模块仍然无法工作。

这是一个完整的工作示例，

const puppeteer = require("puppeteer");
const extras = require("./dummy"); // call it

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto("https://www.example.com");

    const title = await extras(page).getTitle(); // use it here
    console.log({ title }); // prints { title: 'Example Domain' }

    await browser.close();
});

【讨论】：