Error "The element that matches the specified selector is not visible" occurs sporadically when clicking elements related to In-Place-Editor

[mmafe]

The error The element that matches the specified selector is not visible. occurs when trying to click elements that relate to the In Place Editor. The error occurs sporadically and can affect different elements at different times. Occasionally the error does not occur at all and the test will pass.

So far, affected elements (defined in pages/people.js) have included:

• PeoplePage.auth.panelsCustomizeButton
• PeoplePage.auth.viewPanesLink
• PeoplePage.auth.panelsSaveButton
• PeoplePage.auth.pp7Link (might have to ignore this one for troubleshooting since it only exists locally on my machine. It was attempting to click the In Place Editor ViewPanesLink for the PP7 view pane.)

PeoplePage.auth.finishButton may also be a source of the error since although the error points to PeoplePage.auto.panelsSaveButton, the errors occurs right after PeoplePage.auth.finishButton click action.

What have we tried so far

Unsuccessful Attempts at Fixing

• using visibilityCheck on the Selectors for the affected elements
• using --selector-timeout 10000 or --assertion-timeout 10000 on the command line
• separating each .click into a separate line (with its own await)
• adding hover before the click
• Adding a .wait(100) to all clicks that relate to the In Place Editor (this worked for Ben, but not Miranda)

Successful workarounds

• Adding a .wait(500) to all clicks that relate to the In Place Editor (worked for Miranda)
• Adding a .wait(200) to all clicks that relate to the In Place Editor (worked for Miranda)
• Slowing down the test speed to 0.5 speed

Note: none of these are great workarounds, particularly if one time works for one person and another time doesn't.

Resources

• https://testcafe-discuss.devexpress.com/t/page-load-question/130/9
• https://github.com/DevExpress/testcafe/issues/1186#issuecomment-275762330

Sample Errors

  1) - Error in test.before hook -
      The element that matches the specified selector is not visible.

      Browser: Chrome 58.0.3029 / Mac OS X 10.12.5

         49 |       .click(await PeoplePage.auth.panelsCustomizeButton)
         50 |       .click(await PeoplePage.auth.panelsAddToLeft)
         51 |       .click(await PeoplePage.auth.viewPanesLink)
         52 |       .click(await PeoplePage.auth.pp7Link)
         53 |       .click(await PeoplePage.auth.finishButton)
       > 54 |       .click(await PeoplePage.auth.panelsSaveButton)
         55 |       .navigateTo(Env.baseURL);
         56 |

   1) - Error in test.before hook -
      The specified selector does not match any element in the DOM tree.

      Browser: Chrome 58.0.3029 / Mac OS X 10.12.5

         46 |       .setNativeDialogHandler(() => true);
         47 |
         48 |   await t.click(await PeoplePage.auth.panelsCustomizeButton);
         49 |   await t.click(await PeoplePage.auth.panelsAddToLeft);
         50 |   await t.click(await PeoplePage.auth.viewPanesLink);
       > 51 |   await t.click(await PeoplePage.auth.pp7Link);
         52 |   await t.click(await PeoplePage.auth.finishButton);
         53 |   await t.hover(await PeoplePage.auth.panelsSaveButton).click(await PeoplePage.auth.panelsSaveButton);
         54 |   await t.navigateTo(Env.baseURL);

   1) - Error in test.before hook -
      The element that matches the specified selector is not visible.

      Browser: Chrome 58.0.3029 / Mac OS X 10.12.5

         44 |   await t
         45 |       .navigateTo(Env.baseURL).wait(500)
         46 |       .setNativeDialogHandler(() => true)
         47 |       .click(PeoplePage.auth.panelsCustomizeButton)
         48 |       .click(PeoplePage.auth.panelsAddToLeft)
       > 49 |       .click(PeoplePage.auth.viewPanesLink)
         50 |       .click(PeoplePage.auth.pp7Link)
         51 |       .click(PeoplePage.auth.finishButton)
         52 |       .click(PeoplePage.auth.panelsSaveButton)
         53 |       .navigateTo(Env.baseURL)

   1) - Error in test.before hook -
      The element that matches the specified selector is not visible.

      Browser: Chrome 58.0.3029 / Mac OS X 10.12.5

         42 |   await Actions.Login(await t, Env.creds.admin.username, Env.creds.admin.password);
         43 |
         44 |   await t
         45 |       .navigateTo(Env.baseURL)
         46 |       .setNativeDialogHandler(() => true)
       > 47 |       .click(PeoplePage.auth.panelsCustomizeButton)
         48 |       .click(PeoplePage.auth.panelsAddToLeft)
         49 |       .click(PeoplePage.auth.viewPanesLink)
         50 |       .click(PeoplePage.auth.pp7Link)
         51 |       .click(PeoplePage.auth.finishButton)
         52 |       .click(PeoplePage.auth.panelsSaveButton)