Rails Capybara not detecting vivsiblity of flex item

Question

I am doing display: flex an element on button click and then display: none to the same element after some ajax calls. I am doing the integration testing for the same using Capybara with Selenium driver. The problem is that capybara detects the visibility of the element and sometimes it does not even though the element is visible. I have tried giving different wait values but still it works sometimes and sometimes it does not. Is there anyway I can rectify this? The code is as below:

ele.addEventListener('change', () => {
  showSpinner(true);
  ajaxCall().then(() => showSpinner(false));
}

showSpinner = (flag) => {
  let spinner = document.getElementById('spinner');
  if (!spinner) {
    return;
  } else if (flag) {
    spinner.classList.add('show');
  } else {
    spinner.classList.remove('show');
  }
};

.spinner.show {
  display: flex;
}

.spinner {
  display: none;
  // other properties
}

In test file

choose 'radio_button' // if radio button
select 'some text', from: 'dropdown_element' // if dropdown
assert page.has_css?('.spinner', wait: 0)

This works sometimes and sometimes it does not. The element is selected or clicked. That works. But not has_css. Also I tried using assert_css but I am getting error. So how can I write the testcase for the above problem?

What error do you get with `assert_css` because you REALLY REALLY REALLY shouldn't be using bare `assert` with Capybara predicates. If it's that the method doesn't exist it's probably because you haven't required `capybara/minitest` (assuming you are using minitest) — Thomas Walpole, Jan 23 '20 at 15:45
Yes. That method does not exist. I haven't required `capybara/minintest`. I will do that but why should I not use `assert` and why is `assert_css` preferred over the former? — Lax_Sam, Jan 24 '20 at 05:51
because it leads to writing more stable tests (retrying behavior), and because the errors will actually be useful when an assertion does fail — Thomas Walpole, Jan 24 '20 at 14:03

score 0 · Accepted Answer · answered Jan 23 '20 at 10:05

I solved the problem as below. I found the answer from a comment by @Thomas Walpole for this question Check element visibility that is visible for less than a second in Rails Capybara asked by me. The problem was that sometimes the ajax response was very fast and sometimes it was slow. So all I had to was to slow down the network.

// Set the latency time through selenium before the click or select and then check 
// for the visibility of the element on page and then again change back the latency

page.driver.browser.network_conditions = { offline: false, latency: 2000, throughput: 789 }
choose 'radio_button' // if radio button
select 'some text', from: 'dropdown_element' // if dropdown
assert page.has_css?('.spinner', wait: 0)
page.driver.browser.network_conditions = { offline: false, latency: 0, throughput: 0 }
// continue with other tests

This worked for my problem. Feel free to improve this solution.

Rails Capybara not detecting vivsiblity of flex item

1 Answers1