0

I am working with a Protractor and Cucumber to test a React project. In the course of this I have some elements that will have visibility:hidden/visible and I would like to use Protractor's isDisplayed or isPresent to test with.

I wrote a little test because I was getting some strange output and it looks like this: 

  this.Then(/^skal jeg kunne legge inn et nummer$/, function () {
    var inputfelt = element(by.css(".mdl-textfield__input"))
    expect(browser.isElementPresent(inputfelt)).to.eventually.equal(true)
    expect(browser.isElementPresent(inputfelt)).to.eventually.equal(false)
});

This is my last version of this where I am using browser.isElementPresent. I have also used inputfelt.isDisplayed and inputfelt.isPresent and for all three of them this test passes.

I cannot see how it should be able to pass as the field cannot both be present and not be present.

Am I using this wrong?

CraftyViking
  • 1
  • 1
  • 5
  • I don't use Cucumber or Chai-as-promised so I'm not sure how `to.eventually.equal` works, but do the explanations on this question help? http://stackoverflow.com/questions/33019429/in-protractor-browser-iselementpresent-vs-element-ispresent-vs-element-iselemen – Gunderson Oct 12 '16 at 16:40
  • @Gunderson I have looked at that one before and it is why I am using the browser.isElementPresent in the above example. I thougth from that post that I should be using browser.isElementPresent since I am using React and not Angular. – CraftyViking Oct 13 '16 at 06:12

2 Answers2

0

I think you should use a wrapper, because you're using promises. Therefore any one promise that is resolved passes the test. Try the following code:

this.Then(/^skal jeg kunne legge inn et nummer$/, function () {
    var inputfelt = element(by.css(".mdl-textfield__input"))
    return protractor.promise.all([
      expect(browser.isElementPresent(inputfelt)).to.eventually.equal(true),
      expect(browser.isElementPresent(inputfelt)).to.eventually.equal(false)
    ]);
});
ppflcn
  • 1
  • 1
  • Thank you. In the time since I asked the question the team decided to no longer using protractor so I am no longer running into this issue. – CraftyViking Nov 14 '16 at 11:54
0

you can now use protractor-react-selector to identify web elements by react's component, props, and state. This will automatically wait to load REACT in your app and then identify the web elements. It can save you from doing extra ton of workarounds.

You can identify your target element by:

const myElement = element(
    by.react('MyComponent', { someBooleanProp: true }, { someBooleanState: true })
);

Let me know if this helps!

Abhinaba
  • 376
  • 1
  • 8