Watir ChromeDriver Can NOT click Element in Jenkins-AWS-Ubuntu - ruby

Question

I have the following screen
And this is my ruby steps for clicking the "STATUS" tab.
And(/^Click The Status Tab$/) do
# statusTab = driver.link(id: "tab3")
statusTab = driver.link visible_text: "STATUS"
statusTab.wait_until_present
if statusTab.exists?
statusTab.click
puts "Status Tab Clicked"
else
fail "Could NOT locate Status Tab"
end
end
As you can see in my code above, I have tried using the locator "link" by 'id' and 'visible_text'.
The code above works fine in my local computer. I have tried running it using chromedriver and chromedriver in headless mode. I have tried using Jenkins in my local computer, too.
But, it failed when running it in Jenkins server in the AWS.
I got the following error in my cucumber report:
unknown error: Element <em>...</em> is not clickable at point (146, 16). Other element would receive the click: <li>...</li>
(Session info: headless chrome=62.0.3202.62)
(Driver info: chromedriver=2.33.506092 (733a02544d189eeb751fe0d7ddca79a0ee28cce4),platform=Linux 4.4.0-1039-aws x86_64) (Selenium::WebDriver::Error::UnknownError)
Is there a way to tackle this issue?

Answer 1

Most of the time that something works in a real browser, but not headless is due to a difference in the size of the actual browser window. Headless seems to open in a smaller window, which can cause two things to happen
1) element may be off-screen and can't be scrolled to for some reason
2) (especially typical of reactive sites that arrange to fit space allowed) the site ends up arranged such that another element is covering the one you are trying to click.
The clue to which is the case is usually in the error message. In your case the text Other element would receive the click is telling you that something else has covered up the thing you are trying to click on.
Try setting the browser window size right after you create your browser/driver object. If you are using Watir the command usually looks something like this
browser.window.resize_to(1024, 768)
Generally I talk to the PO and ask what the minimum supported screen size (assuming a maximized browser window) is, and set the browser to that size. Often if tablet browsing is to be supported without a special mobile site, the smallest supported screen size will beo 1024x786 or 768x1024 (depending if portrait or landscape orientation is assumed)