復雜應用程序的頁面對象模型結構

Question

在過去的幾個月中，我曾使用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();
});

我嘗試了這種方法，並遇到了有關page1methods.js文件中未定義page所有.js錯誤。 如果有必要，我可以復制粘貼錯誤。

我該怎么辦

• 我能夠實現這種模塊化。
• 如果我可以改善這種結構，那我應該怎么做。

Answer 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)

而已。 現在，所有功能都可以訪問頁面變量。 還有其他方法，例如擴展類，綁定頁面等。但這將是您所看到的最簡單的方法。 您可以根據需要將其拆分。

我們到了一半。 那本身並不能解決這個問題。 由於異步等待和類問題，該模塊仍然無法正常工作。

這是一個完整的工作示例，

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