Beyond the basics: here are 3 ways I have used JavaScript in Selenium
Basic WebDriver commands are what most of us start with. Yes, they can pretty much do anything needed to interact with a webpage, such as locating a web element, clicking on a button, sending the text, etc. However, have you ever wondered about the command executeScript and why Selenium WebDriver provides JavaScriptExecutor in the first place?
Let’s first take a look at how Selenium WebDriver works.
WebDriver acts through these commands defined in the client library (eg. RSelenium for test scripts written in R). In order for them to work, these commands must be first translated through JSON wire protocol, then communicated to the browser via the browser-specific driver (eg. Chrome driver), then finally executed on the web elements in the browser.
By contrast, JavaScriptExecutor is an interface that allows JavaScript to be run directly on the current web page. Since JavaScript is a programming language that the browser understands, there is no need for translation! This also means that JavaScriptExecutor allows you to perform tasks beyond the ones provided by Selenium commands, or when these commands are simply not working due to various reasons.
In this article, I am going to share three scenarios where JavaScriptExecutor came in handy. executeScript is the method used in all these cases. This method injects JavaScript in the currently selected window/frame, without the need for a specific timing requirement such as delay in signal; the latter is covered by executeAsyncScript.
- When WebDriver methods fail to work:
Issue: click() methods don’t work in Salesforce’s lightning framework
This is a known issue; but since it is not as widely documented, it did take me some time to google and figure out the cause and solution.
Beginning in late 2019, Salesforce started implementing a standardized framework which features these lightning web components (LWCs) — I recommend this Youtube video if you want to learn more about them. For running automation, however, the direct impact with the Lightning framework is that the click() methods used by Selenium WebDriver can no longer interact with the web elements, hence the error message I got with the clickElement() in this example. As a side note, findElement() still works and can be used to locate the web elements.
The solution is to use JavaScript to execute the “click”:
2. When some sort of modification to HTML is needed:
Issue: sending text but the field is read-only by default
I have talked about this trick in a previous post where sendKeysToElement command didn’t work straight away because the text was being sent to a read-only input field. The solution required a two-step process, where JavaScript was first injected to remove the “readonly” attribute before applying the WebDriver command:
3. When validation is needed while developing the test script:
Issue: locating multiple web elements at once but need a quick way to differentiate between them
You might have notice in the first issue that instead of locating a single web element findElements() was used with partial text match, which returns a list with more than one element. You might be wondering how I figured out the second element “All_reports[[2]]” should be the one to receive the click action. Well, in order to identify the element in the DOM that corresponds to the correct one, I’ve devised a line of code for quick visual check whenever I’m in doubt:
This JavaScript can provide a visual confirmation by changing the style (eg. color) of the selected element:
So those were my “3 cents”. Have you used JavaScript in your Selenium codes? If so, how did you use them?
