Selenium IDE tests failing when run on Selenium Grid - selenium

Question

I have a setup where I make simple tests with the Selenium IDE, then save the project as a *.side file to a repository, which a server running Selenium Grid then pulls, runs all tests contained and then emails me the results. For most of the tests I get the same results as locally, only a few cookie banners caused trouble because it seems that locally it's not an issue if you don't click them away but when the tests run on the Selenium Grid they will fail because the cookie banner blocks all clicks. Now I have a similar issue but there is nothing like a cookie banner. I am testing a Swagger UI and whenever I run the test on Selenium Grid I get failures like this:
FAIL DefaultSuite/click-a-couple-headers.test.js (7.275s)
✕ click-a-couple-headers (5319ms)
● click-a-couple-headers
ElementClickInterceptedError: element click intercepted: Element <div class="opblock-summary opblock-summary-get">...</div> is not clickable at point (476, 18). Other element would receive the click: <header>...</header>
(Session info: chrome=80.0.3987.106)
at Object.throwDecodedError (../../../node_modules/selenium-side-runner/node_modules/selenium-webdriver/lib/error.js:550:15)
at parseHttpResponse (../../../node_modules/selenium-side-runner/node_modules/selenium-webdriver/lib/http.js:560:13)
at Executor.execute (../../../node_modules/selenium-side-runner/node_modules/selenium-webdriver/lib/http.js:486:26)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 7.58s, estimated 8s
Searching for the CSS selector in the Selenium IDE test this seems to be the part where it fails:
{
"id": "12345678-1111-5555-8888-1234567890ab",
"comment": "",
"command": "setWindowSize",
"target": "968x648",
"targets": [],
"value": ""
}, {
"id": "12345678-2222-6666-8888-1234567890ab",
"comment": "",
"command": "runScript",
"target": "window.scrollTo(0,413)",
"targets": [],
"value": ""
}, {
"id": "12345678-4444-7777-8888-1234567890ab",
"comment": "",
"command": "click",
"target": "css=#operations-category-method_path_to_endpoint > .opblock-summary",
"targets": [
["css=#operations-category-method_path_to_endpoint > .opblock-summary", "css:finder"],
["xpath=//div[#id='operations-category-method_path_to_endpoint']/div", "xpath:idRelative"],
["xpath=//span[2]/div/div/span/div/div", "xpath:position"]
],
"value": ""
}
So I thought it might be a timing issue with the scrolling operation, so I added a whatForElementVisible command before all clicks:
/* scroll command */
{
"id": "12345678-3333-7777-8888-1234567890ab",
"comment": "",
"command": "waitForElementVisible",
"target": "css=#operations-category-method_path_to_endpoint > .opblock-summary",
"targets": [
["css=#operations-category-method_path_to_endpoint > .opblock-summary", "css:finder"],
["xpath=//div[#id='operations-category-method_path_to_endpoint']/div", "xpath:idRelative"],
["xpath=//span[2]/div/div/span/div/div", "xpath:position"]
],
"value": "30000"
},
/* click command */
Locally the test still worked fine in Firefox and Chrome (which the Grid runs) but on the Grid it fails with the same error as before. Does someone know how to fix this issue or how to properly debug it?

Answer 1

Turns out it wasn't an issue with timing at all, but rather a problem with an information bar (about the browser being controlled with automation software) at the top of the browser window that I didn't get locally. The video recording feature of Selenium Grid Extras proved to be really useful to track this down. Useful to know because the README of the repo doesn't mention it: the node info (and videos) are exposed on the ports 3100 (Chrome browser) and 3200 (FireFox browser) respectively.