Codeception Acceptance: Visible - Invisible element


In one of projects, I have acceptance test for testing if user can be removed. The test was from some time failing. There is a helper method to select grid view action via xpath query. That was a first suspect, so that something in grid view has changed, so that the query was no longer valid. The query was a bit risky, so the new grid view component have added data-id attribute for each row for easier selection.

With new data-id  attribute it could as well be queried with CSS selectors. So I have tried selector with both jQuery and document.querySelectorAll. Both returning proper element. Resulting in selector more obvious then previous xpath one:

document.querySelectorAll('tr[data-id="59c16cd0a3d24b725b6171a8"] a[data-bind*="app.module.uac.user.trash"]')

Executing acceptance tests however yield element not visible error. And there the troubles started. Back to console for testing - works fine. However when executed from test runner - it failed.

Resize Window

After looking at test failed screenshot... Well, the element was on screen, but because the test browser window was narrower than developing one, test failed. The fix for this issue was to resize window before tests. I've made it on AcceptanceTester class, so it was for sure executed:

class MyAcceptanceTester extends AcceptanceTester
        public function __construct($scenario)
                $this->resizeWindow(1900, 1000);
  • Projects