Search code examples
behat

behat can not interact with invisible field

Does anyone have suggestions on what's wrong with my code? Here's the code:

     echo $this->find("css","#address-container")->getHtml();
     $field = $this->find("css","#address-container .region input");
     echo $field->isVisible() ? "I can see myself!!!" : "no can not see";
     echo $field->getAttribute('type');
     $field->setValue("ON");

When I run the test, this is the result

  │         <legend>Address</legend>
  │         <div class="field city">
  │           <label>*City</label>
  │           <input class="required city" name="address_add[0][city]" value="" type="text">
  │         </div>
  │         <div class="field region">
  │           <label>*Prov./State</label>
  │           <input class="required region" name="address_add[0][region]" value="" type="text">
  │         </div>
  │         <div class="field country">
  │           <label>*Country</label>
  │           <input class="required country" name="address_add[0][country]" value="" type="text">
  │         </div>
  │     no can not seetext
  Element is not currently visible and so may not be interacted with
  Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
  System info: host: 'ubuntu', ip: '127.0.1.1', os.name: 'Linux', os.arch: 'amd64', os.version: '4.9.15-x86_64-linode81',                                            java.version: '1.8.0_121'
  Driver info: driver.version: unknown (WebDriver\Exception\ElementNotVisible)

I am expecting the #address-container .region input to be VISIBLE. When I go to my browser and go through the steps manually, I do see the region field being visible. Other things I checked for are:

  • there are no other region input fields on the page
  • if I replace region with city or country, everything works fine
  • there is no delayed javascript call manipulating the region input field

What else could be causing the region field to be hidden? Are there better tools for me to use to troubleshoot this issue?

UPDATE

If I swapped the position of the region and country html like this:

  │         <div class="field country">
  │           <label>*Country</label>
  │           <input class="required country" name="address_add[0][country]" value="" type="text">
  │         </div>
  │         <div class="field region">
  │           <label>*Prov./State</label>
  │           <input class="required region" name="address_add[0][region]" value="" type="text">
  │         </div>

Then region becomes visible. But if Change my behat code to look for country, now it's country that's invisible!

So is behat seeing something different that I odn't see in a REAL browser?

Solution

  • The problem was that selenium had a monitor resolution of 800x600. So the elements were actually out of the view port at times. When I increase the monitor resolution to 1366x768, everything worked fine. I was able to debug this by using selenium screenshots.