[Page Object]nightwatch.js 中部分的参数答案

【问题标题】：[Page Object]Parameter for section in nightwatch.js[Page Object]nightwatch.js 中部分的参数
【发布时间】：2021-08-26 19:28:03
【问题描述】：

我有一个单页应用程序和订单部分列表，如下所示：

<form>
   <form-order> // section
     <ElementA>
     <ElementB>
     <ElementC>
   <form-order>
     <ElementA>
     <ElementB>
     <ElementC>
   <form-order>
     <ElementA>
     <ElementB>
     <ElementC>
</form>

在守夜页面对象中：

 form-order:{
  selector:'div[class=form-order]',
  elements:{
     ElementA:'#ElementA',
     ElementB:'#ElementB',
     ElementC:'#ElementC',
     }
  }

当我调用此部分时，将有 3 个，相同的选择器，因此将使用第一个。问题是我如何设置：nth-child() 为该部分和其中的元素，它应该是像这样：

 form-order:{
  selector:"div[class=form-order]:nth-child("+n+")",
  elements:{
     ElementA:"#ElementA",
     ElementB:"#ElementB",
     ElementC:"#ElementC",
     }
  }

但我不知道如何在 nightwach.js 中做到这一点，或者有什么解决方案吗？感谢阅读。

【问题讨论】：

标签： javascript automated-tests nightwatch.js

【解决方案1】：

我不确定您是否可以按照您的建议轻松定义它们，但您可以像这样单独定义它们：

elements: {
    elementA1 : '.select-content:eq(0) #ElementA',
    elementA2 : '.select-content:eq(1) #ElementA',
    elementC3 : '.select-content:eq(2) #ElementC' //and so on
}

这可能会让您继续前进，直到您找到更好的解决方案。当然，您应该将其调整为您拥有的实际 HTML。

【讨论】：

我有 20 个表单订单和 12 个元素，如果我遵循您的解决方案，将有超过 200 个元素。目前，我使用命令而不是元素，但这不是一个好习惯。跨度>
是的，我明白了。抱歉，不知道该怎么做，会尝试检查它以获得更好的解决方案。

【解决方案2】：

最好的方法是创建命令，我使用 Nightwatch 创建稍后在“命令”元素中调用的函数，例如：

var pageFunctions = {
    name_of_function: function(index){
        return this
        .click('xpath', '//*[@id="easycont"]/div/div[2]/div[1]/div[2]/label['+ index+']/input')
    }
}

module.exports = {
    url: 'url',

    elements:{
        name_of_element:{
        selector: name of any element
        }
    },

    commands: [pageFunctions]
}

在测试js中：

"Name of the test": function(client){
var radio_page = client.page.radioPage()

// and here call my page object function
radio_page.marcarGenero(index)

【讨论】：

【解决方案3】：

目前我们通过将孩子的数量作为变量传递来做到这一点 -

checkDocumentMessages(number, text) {
// Where (number) is the nth-child position of the Message you wish to check
 
 let selector = `.dv-messages-inner > div:nth-child(${number}) .msg-content`;
    
  this.expect.element(selector).text.to.equal(text).before(5000);
     return;
},

这允许我们指定我们正在尝试确认哪个文本

【讨论】：