I am in need of assistance with the following:
Requirement: On the homepage, there is a navigation menu bar that changes appearance when scrolling down. This change is reflected in the body class name switching from "home" to "home scriptable persistent-on". I need to validate this in my selenium Webdriver Test scripts.
Problem Statement: The issue arises when trying to use CSS selectors to identify the element by its class name. Due to the dynamic nature of the class name change and the fact that the page source only shows "body=home" even after scrolling, the identification process fails. Here is a snippet of the code where I have attempted different CSS selectors without success. Any guidance on how to handle this would be greatly appreciated, as I am stuck and need to resolve this quickly.
<body class="home scriptable persistent-on">
<script>
//<![CDATA[
/* UI NOTE: - the page is designed by default to function with scripts turned off (for accessibility reasons) adding the class of "scriptable" dynamically allows us to target CSS to users with JavaScript enabled - this is the ONLY piece of JavaScript that should be executed at the top of the page */
document.body.className += " scriptable";
//]]>
...
</body>
I'm using the following code
private static final By BODY_FOR_STICKY_NAV = By.cssSelector("body.home.scriptable.persistent-on");
driver.findElement(BODY_FOR_STICKY_NAV)
I've tried using different ways in CSS selectors..nothing works out
enter code here