Reputation: 1303
I'm using Protractor JS. And the site is written in Angular JS.
So I have a toggle switch. And I noticed the value in the toggle switch goes from true to false and false to true when you switch it off or on.
I am trying create a condition when Protractor visits my page when it sees the toggle switch 'off' it will turn it 'on'. If the toggle switch is already 'on', it will first turn it 'off' then turn it 'on' again.
I came up with this code, but for some reason it is not working:
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')
}
This code appears to work only for the if statement. For some reason it will never go to the else. Here is the error I'm receiving:
NoSuchElementError: No element found using locator: By.cssSelector("[value=\"false\"]")
So then I tried
.isPresent()
instead of .isDisplayed()
I don't receive the above error anymore, but for some reason when using .isPresent() it always goes to the if statement and only runs that, and never the else statement. No errors displayed.
If there is a better way please let me know. This seems very limiting to not be able to create proper conditions in this framework.
Upvotes: 29
Views: 55268
Reputation: 8978
Forget about .then()
. Do this instead:
it('test case', async () => {
if (await element(anyFinder).isDisplayed()) {
// Whatever if it is true (displayed)
} else {
// Whatever if it is false (not displayed)
}
});
Upvotes: 1
Reputation: 1808
Remember that isDisplayed()
returns a promise, you can try with:
element(anyFinder).isDisplayed().then(function(result) {
if ( result ) {
//Whatever if it is true (displayed)
} else {
//Whatever if it is false (not displayed)
}
});
Upvotes: 40
Reputation: 674
isDisplayed()
did not work for me. The API may have been changed. isPresent()
is my solution:
var logoutButton = element(by.css('[ng-click="log_out()"]'));
logoutButton.isPresent().then(function(result) {
if ( result ) {
logoutButton.click();
} else {
//do nothing
}
});
Upvotes: 24
Reputation: 474231
The problem is that isDisplayed()
, as a lot of methods in WebDriverJS/Protractor, returns a promise which by definition is "truthy" which makes it difficult to debug problems like this.
Let's work through an example to get a better understanding.
Imagine, you have the following code, which may look okay at the first glance:
var elm = $("#myid");
if (elm.isDisplayed()) {
// do smth
} else {
// do smth else
}
Now, it has a serious problem. do smth else
part will never be reached, since elm.isDisplayed()
is not a boolean value - it is a promise. Even if the element is not displayed, you would still have // do smth
part executed.
Instead, if you need to check the value of isDisplayed()
to use inside a conditional expression, you have to resolve the promise with then()
explicitly:
var elm = $("#myid");
elm.isDisplayed().then(function (isDisplayed) {
if (isDisplayed) {
// do smth
} else {
// do smth else
}
});
There is also a way to catch these kind of errors without even running the code - statically with ESLint
and eslint-plugin-protractor
plugin. There is a relevant rule that watches if certain Protractor methods are used inside if
conditions directly.
Here is what it would output for the code above:
$ eslint test.js
test.js
2:1 warning Unexpected "isDisplayed()" inside if condition protractor/no-promise-in-if
Upvotes: 7
Reputation: 4289
Or try this solution implemented from the top of my head, Schedules a command to test if an element is present on the page. If any errors occur while evaluating the wait, they will be allowed to propagate.
function alwaysSwitchOn(element) {
browser.driver.isElementPresent(element).then(function(isPresent) {
if (isPresent) {
isPresent = true;
}
else {
browser.driver.wait(function () {
return browser.driver.isElementPresent(element);
}, 5000);
}
// to fail the test, then uncomment this line
//expect(isPresent).toBeTruthy();
}).then(function () {
if (element.getAttribute('value') === 'OFF') {
element.click();
}
else {
// turn it OFF
element.click();
// turn it back ON
element.click();
}
});
}
fn usage is to keep trying again and again for 5 seconds till it's true
. if the element cannot be found within 5 sec
then it'll result in an error code; No such an element is found.Note, If the condition is fulfilled before wait (5s
) it'll quickly move to then(...)
.
Upvotes: 1