Select element not visible - Mac - Safari 11.1 - Selenium - C#

Question

I am testing registration to our website and one of the fields is a select drop-down menu. The test works in full on all Windows Desktop browsers. It also works in Chrome on a Mac. This problem only occurs on Mac Safari 11.1:

When trying to select my desired option, it reports that the select element is not visible.

My tests are being done in Visual Studio through Browserstack. I have screen shots and video that clearly shows that the select element is visible (to the user, at least). It's not near the bottom of the page, there's no footer covering any part of it. I scroll to each element to interact with it.

My troubleshooting:

To see if there was an accessibility issue from the select element downwards, I commented out the code that interacts with the select element and successfully interacted with the element beneath it (text input box).
I added a 30 second wait before trying to select an option in case there was any kind of delay in the driver/DOM 'seeing' the select element - same error.
I double-checked my XPath - on our local Mac the XPath returns only 1 result and it's the select element in question (it's highlighted when you search the code by XPath).
I'm using Selenium.Support.UI method to select an option by its text. 'option' holds the text to select by:

SelectElement select = new SelectElement(element); select.SelectByText(option);

...so I tried selecting by JavaScript by changing the index:

// Selects the option but no option change occurs from the user's perspective, nor are any events triggered based on the change
js.ExecuteScript("arguments[0].selectedIndex = \"" + optionIndex + "\";", element);
// Trigger the change event
js.ExecuteScript("var event = new Event('change', { bubbles: true }); arguments[0].dispatchEvent(event);", element);

...this didn't work either, instead of getting 'element not visible', nothing changed and the test script proceeded to the next text input.

I verified that this method would work by testing it manually in Windows on Chrome's console and also on Mac in Safari 11.1 (changed the ID of the select element to someID):

var element = document.getElementById("someID");
element.selectedIndex = "3";
var event = new Event('change', { bubbles: true });
element.dispatchEvent(event);

...works fine.

So no matter how I try to change the element when running the actual test, either I get not visible or nothing happens. So weird...

Am I missing the obvious here? Is there a known issue with this? I guess the only other way to check this out would be to remove Browserstack from the equation and test locally on our Mac. Which is probably the first thing I should've done...

This is a known issue with selenium. More details here: github.com/SeleniumHQ/selenium/issues/5475 — BountyHunter
– BountyHunter, Commented Oct 3, 2018 at 13:28

Mark Hardy · Accepted Answer · 2018-10-03 14:46:29Z

1

Thank you.

I was on the right track with the JavaScript work-around, but my select element doesn't have an ID, so I had to assign one first, only then would JavaScript change the option...

js.ExecuteScript("arguments[0].setAttribute(\"id\", \"automationID\");", element);

js.ExecuteScript("var element = document.getElementById(\"automationID\"); element.selectedIndex = \"" + optionIndex + "\"; var event = new Event('change', { bubbles: true }); element.dispatchEvent(event);");

answered Oct 3, 2018 at 14:46

Mark Hardy

354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select element not visible - Mac - Safari 11.1 - Selenium - C#

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related