The render of Javascript is not functioning properly in Chromedriver

For website testing in VisualStudio, I planned to use Selenium with Cromedrive. Unfortunately, I encountered difficulty in seeing items generated by Javascript on the page. It appears that chromedriver captures the pagesource before the JS has a chance to run. Despite dedicating 3 days to this issue, I have not been able to resolve it.

I came across various suggestions such as waiting for the entire page to load:

driver.Navigate().GoToUrl("http://...");   
driver.WaitForPageToLoad();

System.Threading.Thread.Sleep(20000); 

and different methods for waiting for element loading:

WebDriverWait waitForElement = new WebDriverWait(driver,TimeSpan.FromSeconds(5)); 
 waitForElement.Until(ExpectedConditions.VisibilityOfAllElementsLocatedBy(By.Id("div.list-item[userid=2]")));

I also experimented with executing javascript and retrieving innerHTML:

uid.GetAttribute("innerHTML");

However, none of these attempts proved successful.

The only progress I made was when using the PhantomJS driver. While it performs well, my requirement is to test it with Chrome.

It seems like drivers render pages differently. For example, the ChromeDriver displays elements as:

<div class="list-item" on-click="{{selectUser}}" userid="{{u.id}}">

whereas the PhantomJSDriver renders them as:

<div class="list-item" on-click="{{ selectUser }}" userid="2">

Although the elements appear the same visually, the pagesources are different.

If you have any insights on how to obtain the same pagesource in ChromeDriver as in Chrome, your input would be greatly appreciated. Thank you.

Answer №1

Appreciate your response. It seems like the "current DOM" is exactly what I'm looking for. Thank you for the helpful hint. The issue arises when I run the script for parentNode and only see all JavaScript variables in plain text.Check out this image for more context

I've also tried using the first value for FindElement(), but the page source remains unchanged. Here's another image reference

I understand that the initial page source is static, as it was delivered from the server without any JS modifications. However, I really need to view it as the current DOM (similar to PhantomJS driver with rendered JS).

I attempted using innerHTML, which turned out to be precisely what I require

Take a look at this image for clarification

Unfortunately, I can't utilize it with FindElement(By)

Another image for reference

Any thoughts on how to integrate the current DOM into the page source or how to employ the values obtained with parentNode within FindElement and subsequently perform actions like .Click()?

Answer №2

Here is my resolution:

In order to find the element you are searching for using CSS selector, you can use the following code snippet:

IWebElement elementName = ((RemoteWebElement)driver).FindElementByCssSelector("whatYouSearch");

For my specific scenario, I used the following code to locate the element with user ID '2' within shadowRoot3:

IWebElement userID = ((RemoteWebElement)shadowRoot3).FindElementByCssSelector("div[userid='2']");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using VSCode for Next.js projects, automatic imports from "react" are not supported

* While similar, this question is not a duplicate of this other question; the solutions provided there are tailored for TypeScript and do not seem to apply to JavaScript. In my current project using Next.js in Visual Studio Code, I am facing an issue wher ...

Instructions on how to eliminate the minutes button from Material UI datetime picker

I'm currently working on customizing a datetimepicker from materialUI in ReactJS. My goal is to prevent the user from seeing or selecting minutes in the picker interface. Despite setting the views prop to include only year, month, date, and hours, use ...

The issue persists where Chrome WebAPI's chrome.webRequest.onBeforeSendHeaders is failing to modify the parameters in the outbound requests

I have been attempting to include an IP address in the X-Forwarded-For parameter within the requestHeader, but my code does not seem to be working based on the examples provided in the Chrome API. Below is the code snippet I am currently using: var reque ...

Once you address a block using jQuery

$(function(){ $(window).scroll(function () { var scrollVal = $(this).scrollTop(); var adscrtop =$(".header").offset().top // 在 RWD 767以下不作動 if(window.screen.width>767){ if(sc ...

What are the best practices for updating models using Bookshelf.js?

I'm struggling to make sense of the Bookshelf API, particularly when it comes to performing upsert operations. Let me outline my specific scenario: My model is named Radio, with a custom primary key called serial. For this example, let's assume ...

Displaying the loading image only on the first result within a while loop

When a submit button is clicked on any result, the loading image below the button displays only for the first result in the while loop. For example, if I click the submit button on the first result, the loading image shows below it. However, when I click t ...

Utilizing Vue alongside Laravel by passing null values as props

Is it permissible to provide a null prop? I have created a main component that accepts the user prop. <div id="app"> <master :user="{{ $user }}"></master> </div> The prop is declared as follows: props : { user: { ...

Pausing for the completion of AJAX calls within a $.each loop before proceeding with the function execution

I am looking to trigger a function only once all of the AJAX calls within my $.each loop have finished executing. What is the most effective approach to accomplish this task? function recalculateSeatingChartSeatIds() { var table_id = $(".seatingChar ...

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Encountering a peculiar mystery issue here... I have created a button on a webpage that triggers a form submission. The form is enclosed within a DIV, which dynamically updates to display the modified data. (this is embedded in a smarty template) form: ...

Is it possible to modify the rows and columns of a password-protected Excel spreadsheet using Java programming?

NPOIFSFileSystem fs = new NPOIFSFileSystem(new File("C://Users//RK5026051//Downloads//500_Lanes.xls")); EncryptionInfo info = new EncryptionInfo(fs); Decryptor d = Decryptor.getInstance(info); if (d.verifyPassword("manh.com")) { ...

Tips for effectively loading data of a specific user or event into a bootstrap modal in Laravel using AJAX

I'm having some trouble loading Event data into my bootstrap modal in Laravel. This is all new to me as I'm just getting started with AJAX. Can someone please take a look at what I've done so far? Modal Template <div class="modal fa ...

Retrieve MongoDB collection using Node.js

I am completely new to the express/mongo stack, and I have encountered an issue that I was unable to find a solution for on Stack Overflow. Here is my problem: Within my index.js file, the code looks something like this: var mongoose = require('mong ...

The image located at 'http://localhost:8080/favicon.ico' was unable to load due to a violation of its content

I am currently developing a JavaScript app called food2fork. I encountered an issue when the AJAX call API promise is fulfilled and the results (recipes) are rendered. However, when I click on one of the recipes, it moves to the next page and displays: ...

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

Angular Material Flex is not providing the correct size

There seems to be a problem with certain values for setting the flex property in the Angular Material layout library. The issue is clearly demonstrated in this straightforward example. By clicking through, you can observe that some values display correctl ...

How to programmatically close a Bootstrap modal in a React-Redux application using jQuery

Hello everyone, I hope you're all doing well. I am currently working on a React application that utilizes Redux. I have run into an issue while trying to close a modal in Bootstrap programmatically. The versions I am using are Bootstrap 4 and jQuery 3 ...

Tips on entering a text field that automatically fills in using Python Selenium

One of the challenges I am facing on my website is an address input text field that gets automatically populated using javascript. Unlike a drop-down field where you can select values or a standard text field where you can manually type in information, thi ...

When working with Typescript, an error may occur related to index types even though the constant object and its

I am struggling with understanding TypeScript, specifically when it comes to a problem I encountered. Hopefully, someone can shed some light on this for me. My issue revolves around a functional component that is responsible for displaying the correct com ...

Creating a new object from a class type in C#

Trying to achieve this specific functionality: Class<?> c = Class.forName(dir.substring(6).replaceAll("/", ".") + file.getName().replaceAll(".java", "")); Packet packet = (Packet)c.newInstance(); If you're familiar with ...

What is the best way to refresh a page with AngularJS?

I have a link that, when clicked by the user, triggers a page reload. I accomplished this using the method below...... HTML <div data-ng-hide="backHide" class="offset6 pull-right"> <a href="" data-ng-click="backLinkClick()"><< Back ...