有没有一种方法可以迭代和比较nodejs中的dom元素?

时间:2019-01-08 17:26:22

标签: javascript node.js nightwatch.js

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

我已经尝试console.log都使用了这两个值,然后又将它们取回,但是我无法从该回调函数返回任何信息。我也似乎无法将其值保存在变量中并返回它。我尝试使用document.getElementById()在普通javascript中进行操作,但这适用于客户端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。当前输出只能记录两个单独的值。

4 个答案:

答案 0 :(得分:1)

我以前没有使用过Nightwatch.js,因此我的假设基于browser.clickbrowser.getValuebrowser.getText异步运行的假设,因为这在UI和UI测试框架,如果它们确实同步运行,则使用回调是没有意义的。

您可能会习惯于使用JavaScript Promise。由于JavaScript引擎是单线程的,因此无法在其他线程处理某些更改(例如,在click事件之后更新UI)时自旋锁/睡眠。 Promise允许您通过处理回调并处理后台事件来解决此问题。

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

不过,在您的情况下,我将包装两个用于在promise中检索值的函数,然后使用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}'`);
            });
        }
    });

答案 1 :(得分:0)

使用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!')
    }
})

答案 2 :(得分:0)

我发现是否嵌套了.getValue()和.getText并分配了变量,我能够将两者进行比较。

答案 3 :(得分:0)

您始终可以使用夜视仪中的.execute()并运行页面中所需的任何JavaScript。

var oWnd = $find("<%= DialogWindow.ClientID %>");
oWnd.show();
//Here set the width and height of RadWindow
oWnd.setSize(400, 400);