CODEWITHSUNDEEP
javascriptreactjsautomated-testse2e-testingtestcafe
user3261338
user3261338

Reputation:

Testcafe Selector does not get element in React Modal

I'm using testcafe to drive a website. I created a page model and I can click on the buttons I already created.

However, my page uses React to create a Modal dialog that is visible only after I click a button. I can get the element using the browser console with document.querySelectorAll('.modal-footer > button')[1].

So in my page model I used Selector('.modal-footer > button').nth(1); and I also tried creating a selector using the syntax in here. In both cases, testcafe is not able to find the element, and I ended up getting a TypeError: Cannot read property 'createElement' of null error.

Here's my code:

// page model
import { Selector } from 'testcafe';

export class PageModel {
  constructor () {
    ... // a bunch of buttons
    this.modalButton = Selector('.modal-footer > button').nth(1);
  }
}

and my test

// test script
import { PageModel } from 'page_model'

const pagemodel = new PageModel();

fixture ...

test('My Test', async t => {
  await t.click(pagemodel.abutton);
  await t.click(pagemodel.openDialog); // the modal dialog opens

  await t.click(pagemodel.modalButton) // <-- Here's where I get the error
});

Using an If statement that only clicks on the button if the button is visible (if (modalButton.exists)), seems to work. But I still get the error when that button disappears after I click.

Any suggestions?

Upvotes: 4

Views: 1216

Answers (1)

user3261338
user3261338

Reputation:

I was able to solve with a try-catch block. I think there are some race conditions in the browser that were causing the test to fail.

const max_retries = 3
let count = 0;
  while (count < max_retries) {
    try {
      await t
        .click(pagemodel.modalButton);
      break;
    }
    catch (e) {
      console.error('An error occurred, trying again...');
      count++;
      if (count === retries) {
        throw e;
      }
    }
  }

Upvotes: 0

Related Questions