我如何在javascript nightwatch.js测试自动化脚本中通过forEach循环将键值对分配给对象数组？

Question

//我创建了一个循环，将索引号[1-16]附加到xpath选择器的末尾（这些是网站上li项目的选择器，除了末尾的索引号外，其他所有选择器都相同。 ）然后，我想将该选择器分配给现有对象数组，作为名为“ link”的键的值。然后，我想调用一个自定义命令以遍历数组并单击每个键值对。这是为了单击链接（xpath选择器）并验证自动化是否落在我用url验证的正确页面上。数组中的每个对象都有2个键值对，即链接和url。我尝试在仅将选择器添加到常规数组的地方进行操作，并且以这种方式可以正常工作。但是，当我尝试将选择器作为对象的一部分添加到数组时，会出现错误。我的代码如下：

//在这里，我要将新连接的xpath选择器分配给对象数组。我尝试了map，push，concat，assign和我可以找到的与数组关联的所有其他功能：

for (let i = 0; i < 17; i++) { 
    abtArr[i].concat({link: abtSel + `[${i}]`})
} 

abtArr.forEach(item => {
    aosPage
        .click(item.link) 
        .verify.urlContains(item.url)
})


//object array (abtArr)

module.exports = [
    {
        link: '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div/div[2]/div[1]/div/ul/li[1]',
        url: 'https://www.aos.org/about-us/aos-membership.aspx'
    }, 
    {
        link: '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div[1]/div[2]/div[1]/div/ul/li[2]',
        url: 'https://www.aos.org/about-us/lindleyana-magazine.aspx'
    },


]

代码段（最小的可复制示例）：

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

/*
const abtArr = [
    {
        link: '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div/div[2]/div[1]/div/ul/li[1]',
        url: 'https://www.aos.org/about-us/aos-membership.aspx'
    }, 
    {
        link: '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div[1]/div[2]/div[1]/div/ul/li[2]',
        url: 'https://www.aos.org/about-us/lindleyana-magazine.aspx'
    },
];
*/

// const abtSel = '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div/div[2]/div[1]/div/ul/li';
const abtSel = '//*[@id="target"]/ul/li';
const abtArr = [];

for (let i = 1; i < 11; i++) { 
    const xPath = `${abtSel}[${i}]/a`;
    const linkTag = getElementByXpath(xPath);
    const someUrl = linkTag ? linkTag.href : null;
    abtArr.push({link: xPath, url: someUrl})
} 

console.log(abtArr);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<div id="target">
  <ul>
    <li><a href="example1.com">Link</a></li>
    <li><a href="example2.com">Link</a></li>
    <li><a href="example3.com">Link</a></li>
    <li><a href="example4.com">Link</a></li>
    <li><a href="example5.com">Link</a></li>
    <li><a href="example6.com">Link</a></li>
    <li><a href="example7.com">Link</a></li>
    <li><a href="example8.com">Link</a></li>
    <li><a href="example9.com">Link</a></li>
    <li><a href="example10.com">Link</a></li>
  </ul>
</div>

Answer 1

这里是带有HTML和JS的代码片段（最小可重现示例）（与我在您的问题中作为示例进行的介绍相同）：

而且，看起来您正在使用节点和Nightwatch，您应该在问题中标记它们（我现在做过-应该帮助合适的人找到问题等），并至少添加最少的import语句和初始数据等

这是您要尝试做的事情吗？ （但是，当然，此示例仅是客户端，因此它不是一对一的，但至少它应该给您一个想法）

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

/*
const abtArr = [
    {
        link: '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div/div[2]/div[1]/div/ul/li[1]',
        url: 'https://www.aos.org/about-us/aos-membership.aspx'
    }, 
    {
        link: '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div[1]/div[2]/div[1]/div/ul/li[2]',
        url: 'https://www.aos.org/about-us/lindleyana-magazine.aspx'
    },
];
*/

// const abtSel = '//*[@id="aspnetForm"]/div[4]/section/div[1]/div/div[2]/div/div[2]/div[1]/div/ul/li';
const abtSel = '//*[@id="target"]/ul/li';
const abtArr = [];

for (let i = 1; i < 11; i++) { 
    const xPath = `${abtSel}[${i}]/a`;
    const linkTag = getElementByXpath(xPath);
    const someUrl = linkTag ? linkTag.href : null;
    abtArr.push({link: xPath, url: someUrl})
} 

console.log(abtArr);

/*.as-console-wrapper { max-height: 100% !important; top: 0; }*/

<div id="target">
  <ul>
    <li><a href="example1.com">Link</a></li>
    <li><a href="example2.com">Link</a></li>
    <li><a href="example3.com">Link</a></li>
    <li><a href="example4.com">Link</a></li>
    <li><a href="example5.com">Link</a></li>
    <li><a href="example6.com">Link</a></li>
    <li><a href="example7.com">Link</a></li>
    <li><a href="example8.com">Link</a></li>
    <li><a href="example9.com">Link</a></li>
    <li><a href="example10.com">Link</a></li>
  </ul>
</div>

输出：

[
  {
    "link": "//*[@id=\"target\"]/ul/li[1]/a",
    "url": "https://stacksnippets.net/example1.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[2]/a",
    "url": "https://stacksnippets.net/example2.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[3]/a",
    "url": "https://stacksnippets.net/example3.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[4]/a",
    "url": "https://stacksnippets.net/example4.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[5]/a",
    "url": "https://stacksnippets.net/example5.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[6]/a",
    "url": "https://stacksnippets.net/example6.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[7]/a",
    "url": "https://stacksnippets.net/example7.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[8]/a",
    "url": "https://stacksnippets.net/example8.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[9]/a",
    "url": "https://stacksnippets.net/example9.com"
  },
  {
    "link": "//*[@id=\"target\"]/ul/li[10]/a",
    "url": "https://stacksnippets.net/example10.com"
  }
]