有没有办法在nodejs中迭代和比较dom个元素？

Question

我正在尝试从我正在自动化的站点获取两个值。我遍历一组元素并尝试将下拉列表的值与页面上的值进行比较，以确保它们彼此相等。其中一个值只能由 .getValue() 访问。另一个由 .getText() 访问。我想把这些回调函数的result.value保存下来，对比一下结果。

我已经尝试 console.log 这两个值并取回它们，但是我无法从这个回调函数中 return 任何东西。我似乎也无法将它的值保存在变量中，return 也一样。我试过用 javascript 和 document.getElementById() 来实现它，但这适用于客户端 javascript，而不是像 nodejs 这样的服务器端。只是想比较两个值

for (let i = 1; i <= 20; i++) {
  browser
    .element('css selector', `mat-nav-list > a:nth-child(${i})`,
      function(result) {
        if (result.value && result.value.ELEMENT) {
          browser.isVisible(`mat-nav-list > a:nth-child(${i})`,
            function(result) {
              if (result.value === true) {

                browser.click(`mat-nav-list > a:nth-child(${i})`)
                let chunkView = '#mat-input-0';
                let sideBar = `body > gps-app-root > div > div.sidebar-desktop > gps-app-sidebar-menu > div > div.product-list-wrap > mat-nav-list > a:nth-child(${i}) > div`

                browser.getValue(chunkView, function(result) {
                  chunkView = result.value
                  console.log(chunkView)
                })

                browser.getText(sideBar, function(result) {
                  console.log(result.value);
                })
              }
            })
        }
      })
  //.pause(2000)
  //.pause(10000)
}

当我遍历时，我希望 sideBar result.value 的两个值等于 chunkView result.value。当前输出只能记录两个单独的值。

Answer 1

使用 perform 方法确保回调在下一个命令之前完成。（参见 https://github.com/nightwatchjs/nightwatch/wiki/Understanding-the-Command-Queue#the-perform-command）

像这样

browser.getValue(chunkView, function(result) {
  chunkView = result.value
  console.log(chunkView)
}).perform(function() {
  // here you have access to chunkView so you can compare it
  browser.getText(sideBar, function(result) {
    console.log(result.value);
    if (chunkView === result.value) {
      console.log('They are the same!');
    }
  })
});

或者您可以链接 perform 命令，这样您就可以在最后比较中间步骤的数量。

let chunkView = '#mat-input-0',
    chunkViewResult;
let sideBar = `body > gps-app-root > div > div.sidebar-desktop > gps-app-sidebar-menu > div > div.product-list-wrap > mat-nav-list > a:nth-child(${i}) > div`,
    sideBarResult;

browser.getValue(chunkView, function(result) {
    chunkViewResult = result.value
    console.log(chunkView)
}).getText(sideBar, function(result) {
      sideBarResult = result.value
      console.log(sideBarResult);

}).perform(function() {
    if (chunkViewResult === sideBarResult) {
        console.log('They are the same!')
    }
})

Answer 2

我之前没有使用过Nightwatch.js，所以我的回答基于以下假设：browser.click、browser.getValue和browser.getText 运行异步，因为这在 UI 和 UI 测试框架中很常见，而且，如果他们运行同步进行，那么使用回调就没有意义了。

您可能想要习惯使用 JavaScript Promise。由于 JavaScript 引擎是单线程的，因此无法 spinlock/sleep 而另一个线程处理某些更改（例如在单击事件后更新 UI ）。 Promise 允许您通过在幕后使用回调和处理事件来解决这个问题。

然后您可以使用 promise.then() 将返回值传递给下一个回调。

不过，在您的情况下，我会将检索值的两个函数包装在 promises 中，然后使用 Promise.all()。这允许他们以可以提高性能的任何顺序完成。

browser.isVisible(`mat-nav-list > a:nth-child(${i})`,
    function(result) {
        if (result.value === true) {
            browser.click(`mat-nav-list > a:nth-child(${i})`);
            let chunkView = '#mat-input-0';
            let sideBar = `body > gps-app-root > div > div.sidebar-desktop > gps-app-sidebar-menu > div > div.product-list-wrap > mat-nav-list > a:nth-child(${i}) > div`;

            let valPromise = new Promise(resolve => {
                browser.getValue(chunkView, resolve);
            });

            let textPromise = new Promise(resolve => {
                browser.getText(sideBar, resolve);
            });

            Promise.all([valPromise, textPromise]).then(([valueResult, textResult]) => {
                browser.assert.strictEqual(valueResult.value, textResult.value, 
                    `Server-side value '${value.result}' does not match client-side value '${text.result}'`);
            });
        }
    });

Answer 3

我发现如果我嵌套 .getValue() 和 .getText 并分配变量，我就能够比较两者。

Answer 4

您始终可以使用 nightwatch 中的 .execute() 和运行页面中您想要的任何 javascript。

client.execute(
  function (data) { 
    // this is runned in browser
  },
  [what_you_pass_to_the_function_above_as_data], // multiple parameters = multiple elements in array
  function (result) {
    // result.status == -1 if error happend 
    // here you cand compare what you want... result.value is the returned things from the browser executed function.
  }
);

有没有办法在nodejs中迭代和比较dom个元素？

Is there a way to iterate and compare dom elements in nodejs?

javascript

node.js

nightwatch.js