如何在 Nightwatch 测试的自定义命令中添加嵌套函数 javascript - forEach - 循环遍历元素

Posted 2023-04-19

【中文标题】如何在 Nightwatch 测试的自定义命令中添加嵌套函数 javascript - forEach - 循环遍历元素

【英文标题】：How to add nested functions javascript in custom commands for Nightwatch testing- forEach -loop through elements

【发布时间】：2021-10-25 22:37:00

【问题描述】：

您好，我是 javascript 和 Nightwatch 的新手，我是一名手动测试人员，大约 6 个月前开始进行自动化测试。 我正在编写测试用例来检查产品的详细信息，并带有可折叠的菜单。按 + 按钮将打开并显示一个元素列表，当使用相同按钮关闭时，它会关闭列表，并显示一个计数器，其中包含列表中的项目数。

我有一个正确执行此过程的函数，但我已将它写在测试中。我想在拥有与该页面相关的所有元素和功能的页面中使用它。我想从测试中调用该函数。我已经能够做到这一点，但对于嵌套函数的情况则不行，因为我不知道如何编写它。

这些是我的页面：

   loginPage.js;
   productPage.js;
   productFuntionalityListPage.js;

这是我的测试：

module.exports = 
    'Buy a Product with Bank Account': function (browser) 
        const login = browser.page.loginPage();
        const productList = browser.page.productPage();
        const productFunctionalityList = browser.page.productFuntionalityListPage();
        


        login
            .navigate()
            .checkLoginPage();

        productList
            .getAProduct()


        //------------------------------------------Features--------------------------------------

        //function to click on each button for functionalities and wait for list to appear
        function displayFunctionsList(elems) 
            elems.value.forEach(function (element) 
                browser.elementIdClick(element.ELEMENT)
                    //wait for list to appear
                    .waitForElementVisible('.list_of_items')
                    .pause(2000)
            )
        

        // click on each function and wait for list to appear
        browser.elements('css selector', '.expand_collapse_btn', displayFunctionsList, 5000)

        browser.useCss()

        // close each function
        function closeFunctionsList(elems) 
            elems.value.forEach(function (element) 
                browser.elementIdClick(element.ELEMENT)
                    //after click close wait for count to appear
                    .waitForElementVisible("input[data-id='counter']")
                    .pause(2000)
            )
        

 browser.elements('css selector', '.expand_collapse_btn', closeFunctionsList, 2000)

browser.end()

这工作正常。

下面是我尝试过但不起作用的：

页面：

productFuntionalityListPage.js

module.exports = 

    elements: 

        counterOfItemsInList: 
            locatorStrategy: 'css selector'
            selector: "input[data-id='counter']",
        ,

        expandCollapseBtn: 
            locateStrategy: 'css selector',
            selector: '.expand_collapse_btn',
        ,
       listOfItems: 
            locateStrategy: 'css selector',
            selector: '.list_of_items',
        
  ,

commands: [
        displayFunctionsList: function () 
            function displayFunctionsList(elems) 
                elems.value.forEach(function (element) 
                    this.elementIdClick(element.ELEMENT)
                        //wait for list to appear
                        .waitForElementVisible('@listOfItems')
                        .pause(2000)
                )
            

            this.elements('css selector', '@expandCollapseBtn', displayFunctionsList, 5000)

        ,

 closeFunctionsList: function () 
            function closeFunctionsList(elems) 
                elems.value.forEach(function (element) 
                    this.elementIdClick(element.ELEMENT)
                        //wait for list to appear
                        .waitForElementVisible('@counterOfItemsInList')
                        .pause(2000)
                )
            

            this.elements('css selector', '@expandCollapseBtn', closeFunctionsList, 5000)

        


    ]

从页面测试调用函数：

module.exports = 
    'Buy a Product with Bank Account': function (browser) 
        const login = browser.page.loginPage();
        const productList = browser.page.productPage();
        const productFunctionalityList = browser.page.productFuntionalityListPage();
     


        login
            .navigate()
            .checkLoginPage();

        productList
            .getAProduct()


        //------------------------------------------Features--------------------------------------

         //calling displayFunctionsList from productFuntionalityListPage.js
         productFunctionalityList.displayFunctionsList()
         
         //calling closeFunctionsList from productFuntionalityListPage.js
         productFunctionalityList.closeFunctionsList()
         


browser.end()

运行上述测试后的结果：

Error:
TypeError: this.elements is not a function
   - writing an ES6 async test case? - keep in mind that commands return a Promise; 
   - writing unit tests? - make sure to specify "unit_tests_mode=true" in your config.

谁能帮我将这些函数作为自定义命令添加到 productFuntionalityListPage.js 中并从测试本身调用这些函数？不知道怎么回事，因为我缺乏 javascript 和守夜知识。

【参考方案1】：

在调用这样的函数时尝试将浏览器作为变量传递 -

##Test page##
//Example call

gmail.selectEmail(browser, 'browser authentication')

然后是pageObject中的方法-

##Page Object##
//Example Method
selectEmail(browser, searchValue)
     browser.blah(searchValue);
     browser.blah
     browser.blah
;

让它工作的方式有点混乱，但这已经救了我几次培根

【讨论】：

另外，这可能是对更清洁路线的更好解释 - ***.com/questions/50651476/…

非常感谢您的帮助！！！！我会尝试一下，我会检查解释以使其更好。周末愉快！斯特菲