Rails Capybara not detecting vivsiblity of flex item - ruby-on-rails

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?

Answer 1

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.