[页面对象]nightwatch.js 部分的参数

Question

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

<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 中执行此操作，或者对此有任何解决方案吗？ 感谢阅读。

Answer 1

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

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

在找到更好的解决方案之前，这可能会让您继续前进。 当然，您应该对此进行调整以使其适合实际的HTML。

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

Answer 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;
},

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