Using JavaScript to Access Embedded Image Data in Selenium Webdriver

Question

Using JavaScript to Access Embedded Image Data in Selenium Webdriver

Can anyone help me extract the src from the HTML code provided below? I'm wondering if it's possible to retrieve embedded image data using JavaScript. Also, is there a way to display hidden elements? Currently, I am utilizing Selenium WebDriver with Java.

<div id="sc859" class="atv4 alc sc-view c-image sc-hidden" style="left: 0px; right: 0px; top: 0px; bottom: 0px">
    <img style="height: 100%; width: 100%;" src="data:image/gif;base64,R0lGODlhAQABAJAAAP///wAAACH5BAUQAAAALAAAAAABAAEAAAICBAEAOw==" class="alc-img"/>
</div>

This is how I've attempted to handle it:

JavascriptExecutor jse = (JavascriptExecutor)driver; 
WebElement element = driver.findElement(By.cssSelector("#sc859")); 
String imgeJs = (String) jse.executeScript("document.getElementsById('sc859')[0].getAttribute('src');", element);
System.out.println(imgeJs);

java javascript selenium selenium-webdriver

Answer 1

Answer №1

Give this a shot:

WebElement section = driver.findElement(By.id("sc859"));
String picture =  section.findElement(By.className("alc-img")).getAttribute("src");

System.out.println(picture);

Answer 2

Give this a shot:

WebElement section = driver.findElement(By.id("sc859"));
String picture =  section.findElement(By.className("alc-img")).getAttribute("src");

System.out.println(picture);

Answer 3

Answer №2

In my experience, I've found that using the code

document.getElementsById('sc859')[0].getAttribute('src');

never seems to work for me in the past. Instead, I tend to directly execute the script as shown below. I hope this is what you were looking for. Additionally, please note that the attribute src does not belong to the div element but rather to an img tag, so your selector was incorrect.

String src = (String) ((JavascriptExecutor)driver).executeScript("return document.querySelector(\"#sc859>img\").getAttribute(\"src\");");

System.out.println(src);

Here is the output:

data:image/gif;base64,R0lGODlhAQABAJAAAP///wAAACH5BAUQAAAALAAAAAABAAEAAAICBAEAOw==

Answer 4

In my experience, I've found that using the code

document.getElementsById('sc859')[0].getAttribute('src');

never seems to work for me in the past. Instead, I tend to directly execute the script as shown below. I hope this is what you were looking for. Additionally, please note that the attribute src does not belong to the div element but rather to an img tag, so your selector was incorrect.

String src = (String) ((JavascriptExecutor)driver).executeScript("return document.querySelector(\"#sc859>img\").getAttribute(\"src\");");

System.out.println(src);

Here is the output:

data:image/gif;base64,R0lGODlhAQABAJAAAP///wAAACH5BAUQAAAALAAAAAABAAEAAAICBAEAOw==

Answer 5

Answer №3

Avoiding the need for JavaScript is possible, and you can simplify Francesco's solution by using this code snippet:

String src = driver.findElement(By.cssSelector("#sc859 > img.alc-img")).getAttribute("src");

Answer 6

Avoiding the need for JavaScript is possible, and you can simplify Francesco's solution by using this code snippet:

String src = driver.findElement(By.cssSelector("#sc859 > img.alc-img")).getAttribute("src");

Answer 7

Answer №4

Here are 3 common mistakes you might be making -

1 - getElementsById should actually be getElementById, which will only return a single element, not a collection of elements. There is no method called getElementsById as far as I know.

2 - You seem to be missing the return statement in your executeScript method.

3 - The div element whose id you have provided does not have a src attribute. The src attribute is usually associated with img elements, not div elements.

Your updated code should look something like this:

String imgeJs = jse.executeScript("return document.getElementById('sc859').childNodes[1].getAttribute('src')").toString();

Alternatively, you can achieve the same result by using the following code:

WebElement element = driver.findElement(By.cssSelector("#sc859" > img.alc-img));
String imgeJs = jse.executeScript("return arguments[0].getAttribute('src')", element).toString();

Otherwise, you can simply use the element.getAttribute("src") method from the WebElement interface as suggested in other answers.

Answer 8

Here are 3 common mistakes you might be making -

1 - getElementsById should actually be getElementById, which will only return a single element, not a collection of elements. There is no method called getElementsById as far as I know.

2 - You seem to be missing the return statement in your executeScript method.

3 - The div element whose id you have provided does not have a src attribute. The src attribute is usually associated with img elements, not div elements.

Your updated code should look something like this:

String imgeJs = jse.executeScript("return document.getElementById('sc859').childNodes[1].getAttribute('src')").toString();

Alternatively, you can achieve the same result by using the following code:

WebElement element = driver.findElement(By.cssSelector("#sc859" > img.alc-img));
String imgeJs = jse.executeScript("return arguments[0].getAttribute('src')", element).toString();

Otherwise, you can simply use the element.getAttribute("src") method from the WebElement interface as suggested in other answers.

Using JavaScript to Access Embedded Image Data in Selenium Webdriver

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Spring Boot application refuses to launch when initiated from the VSCode terminal, yet it functions perfectly when launched via the "Boot Dashboard" plugin in Eclipse

maintaining the longevity of an android service

Mailchimp fails to deliver response with a Status code of 404

Switch between two menu tabs on a website using HTML and Javascript

A guide to creating a reference between two tables using the hasOne method in sequelize.js

Exploring the power of Lingui and yup validation within the NextJS framework

Loop through the JSON data to generate clickable links in the innerHTML

What steps should I follow to properly configure my TypeScript Node.js project?

Expanding and contracting div animations

What is the best method for integrating static files (such as css, images, js, etc.) into our Node.js application?

Setting up the Java plugin for Chrome on Ubuntu

Diverse Range of Exports Available in React Component Library

Updating Icons Using jQuery Click Function

What is the best way to incorporate animation into Bootstrap dropdowns?

"Using .prependTo() and .insertAfter() functions without the need for jQuery

JavaScript not executing script when key is pressed

An error occurred while trying to call the virtual method 'android.os.Parcelable android.os.Bundle.getParcelable(java.lang.String)' on a null object reference

What are the best techniques for creating animations in AngularJS?

What steps can be taken in Next.js to display a 404 page when data is not retrieved from the Wordpress admin?

Implementing Vuejs Array Push in Separate Components