如何在量角器中为元素存在与否创建条件

Question

我正在使用Protractor JS.该网站是用Angular JS编写的.

所以我有一个拨动开关.我注意到,当你关闭或打开时,切换开关的值从true变为false,false变为true.

我正在尝试在Protractor访问我的页面时创建一个条件,当它看到切换开关'off'时它将'打开'.如果拨动开关已经"打开",它将首先将其关闭,然后再将其打开.

我提出了这个代码,但由于某种原因它无法正常工作:

 if( expect(element(By.id('toggle-switch')).element(By.css('[value="false"]')).isDisplayed()) ) {
            element(By.id('toggle-switch')).click();
            console.log('in the if')
       }

       else{
           element(By.id('toggle-switch')).click();
           browser.sleep(3000);
           element(By.id('toggle-switch')).click();
           console.log('in the else')
       }

此代码似乎仅适用于if语句.由于某种原因,它永远不会去其他地方.这是我收到的错误:

NoSuchElementError:找不到使用locator的元素:By.cssSelector("[value = \"false \"]")

所以我试过了

.isPresent()而不是.isDisplayed() 我不再收到上述错误,但由于某些原因,当使用.isPresent()时,它总是转到if语句并且只运行那个,而不是else语句.没有显示错误.

如果有更好的方法请告诉我.这似乎非常有限,因为无法在此框架中创建适当的条件.

Answer 1

请记住,isDisplayed()返回承诺,您可以尝试:

element(anyFinder).isDisplayed().then(function(result) {
    if ( result ) {
        //Whatever if it is true (displayed)
    } else {
        //Whatever if it is false (not displayed)
    }
});

Answer 2

isDisplayed()不适合我.API可能已更改.isPresent()是我的解决方案:

    var logoutButton =  element(by.css('[ng-click="log_out()"]'));
    logoutButton.isPresent().then(function(result) {
    if ( result ) {
        logoutButton.click();
    } else {
        //do nothing
    }
    });

Answer 3

问题在于isDisplayed(),正如WebDriverJS/Protractor中的许多方法一样,返回一个定义为"truthy" 的promise,这使得很难调试这样的问题.

让我们通过一个例子来更好地理解.

想象一下,你有以下代码,乍一看可能看起来没问题:

var elm = $("#myid");
if (elm.isDisplayed()) {
    // do smth
} else {
    // do smth else
}

现在,它有一个严重的问题.do smth else部分将永远不会到达,因为elm.isDisplayed()它不是布尔值 - 它是一个承诺.即使没有显示元素,您仍然会// do smth执行部分.

相反,如果需要isDisplayed()在条件表达式中检查要使用的值,则必须显式解析promisethen():

var elm = $("#myid");
elm.isDisplayed().then(function (isDisplayed) {
  if (isDisplayed) {
      // do smth
  } else {
      // do smth else
  }
});

还有一种方法可以捕获这些错误,甚至无需运行代码 - 静态使用ESLint和eslint-plugin-protractor插件.有一条相关规则可以监视某些Protractor方法是否if直接在条件内使用.

以下是上面代码的输出结果:

$ eslint test.js
test.js
  2:1  warning  Unexpected "isDisplayed()" inside if condition  protractor/no-promise-in-if