javascript - 复杂应用程序的页面对象模型结构
问题描述
在过去的几个月里,我使用 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();
});
我已经尝试过这种方法并遇到了关于未在文件中定义的各种.js
错误。如果有必要,我可以复制粘贴错误。page
page1methods.js
我该怎么做才能让我
- 我能够实现这种模块化。
- 如果我可以改进这个结构,我的方法应该是什么。
解决方案
您可以返回一个箭头函数,该函数将返回带有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)
而已。现在所有函数都可以访问页面变量。还有其他方法,例如扩展类、绑定页面等。但这将是您所看到的最简单的方法。如果需要,您可以拆分它。
我们已经成功了一半。这本身并不能解决这个问题。由于异步等待和类问题,该模块仍然无法工作。
这是一个完整的工作示例,
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();
});
推荐阅读
- entity-framework - 扩展 Linq OrderBy
- qt - QMenu(和子菜单)在不同的监视器位置打开
- django - Django中的data_get(Laravel)是否存在辅助函数?
- asp.net-core - SignalR - 发送消息 AllExcept() 不起作用(Aspnet Core 2.1)
- javascript - 使用 Javascript 进行表单验证:未设置错误标签
- dynamics-crm-online - Dynamics CRM Marketing Form - 将 CRM 数据发送到 CMS 托管表单
- twilio - 根据自定义逻辑将传入任务(短信、电话、聊天)分配给人员的最佳方式是什么?
- python - 如何从def函数获取变量到全局?
- bash - 循环的正则表达式条件不适用于扩展测试
- oracle-cloud-infrastructure - 如何使用 python SDK 获取对 OCI 对象存储中对象的预身份验证请求?