Capture element in Javascript with screenshot functionality

I've been trying to save an image on my local website, but most of the code examples I find are for C# and Java, which I am struggling to convert to JavaScript.

Many of the examples I come across use libraries like Point and IO that are not available in JavaScript. I even tried searching for code in Node.js on Stackoverflow, but the solutions I found didn't work for me.

Currently, my code can take a screenshot of the entire webpage, but what I really need is to capture an image with a specific ID. Here's the code I have so far:

driver.findElement(webdriver.By.xpath('//img[@id="c_pages_Image"]'))
 .then(function(){
    driver.takeScreenshot("c:\\selenium_local_map\\out1.png");
});

driver.takeScreenshot().then(function(data){
   var base64Data = data.replace(/^data:image\/png;base64,/,"")
   fs.writeFile("out.png", base64Data, 'base64', function(err) {
        if(err) console.log(err);
   });
});

Answer №1

const imageLocator = await driver.wait(until.elementLocated(By.xpath('//img')), 5000) // Locates the image element
const imageScreenshot = await imageLocator.takeScreenshot(false) // Takes a screenshot of the image element

fs.writeFileSync('\path\to\target\file', imageScreenshot, 'base64')

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

How to display a div in Angular when hovering with ElementRef and Query List

I am having trouble implementing a ngFor loop in my project where I want to display a div on mouse hover using the @Input notation. This is how my HTML code looks: <div class="col s12 m6" style="position: relative" *ngFor="let res of hostInfo.resident ...

Tips for effectively managing dynamic xpaths

When conducting a search operation, I am required to select the text that is returned as a result. Each search will produce different xpaths. Below are examples of various xpaths returned during a search: .//*[@id='messageBoxForm']/div/div[1]/di ...

Struggling to pick a specific table with Selenium?

I attempted to scrape specific table data from a webpage using selenium. Unfortunately, it scrapes all tables on the page instead of just the one I need. I am struggling to figure out how to target and extract the individual table I want. Here is the code ...

Creating a Vue.js vuetify input that restricts the user to entering only three digits before the decimal point and two digits after the decimal point

I am looking to implement a restriction on the total number of input digits to 3. Users should be able to enter numbers like 333, 123, etc. However, if they include a decimal point, they should only be allowed to enter 2 digits after the decimal point. Val ...

Continuously encountering an Unresolved reference error for 'By' while using Selenium

Can someone help me with the error message "Unresolved reference 'By'"? Below is the code snippet where I am facing the issue: from selenium import webdriver driver = webdriver.Chrome() driver.get("https://www.indiegogo.com/explore/home?pro ...

What happens with the styling in this project when the CSS file is blank?

As a first-year CS student in university, I have been diving into the world of React.js. Currently, I am exploring a resume project and noticed that both app.js and index.js files are empty. I am curious to know how the styling is achieved in this project. ...

modify the navigation when router events are triggered

Is there a way to modify the destination route after the router events have been triggered in an Angular app? I am trying to implement a functionality where if the user clicks the browser back button, the navigation is redirected to the home page. However, ...

Does the sequence matter when studying JavaScript, Ajax, jQuery, and JSON?

Expanding my job opportunities is a top priority for me, which is why I am dedicated to learning JavaScript, AJAX, jQuery, and JSON. As I delve into these languages, I can see how they all have roots in JavaScript. My main inquiry is about the relationsh ...

How can we identify if a React component is stateless/functional?

Two types of components exist in my React project: functional/stateless and those inherited from React.Component: const Component1 = () => (<span>Hello</span>) class Component2 extends React.Component { render() { return (<span> ...

Utilizing a linked list to manage consecutive JS/Ajax/Jquery requests for seamless processing

Here is my code snippet: <script type="text/javascript"> var x = 1; var data = JSON.parse( document.getElementById('json').innerHTML); var next = data['next']; var jsonData = data['data']; ...

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

I have a JSON array dataset where each object may contain nested arrays. In order to display the inner nested array elements as part of the parent array using Angular's NgFor, I need to format the input like this: [{ 'id': 1, 'tit ...

Looking for a way to make the spinner disappear in puppeteer while waiting?

What is the most effective way to wait for the spinner to vanish before clicking on a button? Check out this example ...

How to use PHP and JavaScript to update a location marker on Google Maps

I'm new to web development and in need of some help, please. I have a code that is supposed to update the marker location with coordinates retrieved from a database. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AP ...

Update issue with Material UI table rows when using setState method

Currently, I am facing an issue with passing content to my Material UI table using props. When props are passed explicitly, it works fine. However, I need to retrieve the props from a Firestore database and then pass them to the table. To achieve this, I a ...

What are the alternative methods to execute a React.js application without using react-scripts?

After creating my React.js app using the command below: npx create-react-app my-app I'm now looking to modify the package.json script section to run the app without react-scripts. How can I achieve this? "scripts": { "start&quo ...

Is it possible to compile TypeScript modules directly into native code within the JavaScript data file?

I am seeking a way to break down an app in a TypeScript development environment into separate function files, where each file contains only one function. I want to achieve this using TS modules, but I do not want these modules to be imported at runtime in ...

Disabling the smooth scrolling feature on tab navigation

I am using smooth scroll JS to navigate from a menu item to an anchor located further down the page. However, I am encountering an issue where my tabs (which utilize #tabname) also trigger the scroll behavior when clicked on. Is there a simple modificati ...

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

Display a loading spinner on the browser while the form is being submitted

My current project involves using AJAX to retrieve data and populate a form. The data being fetched is quite large, resulting in a delay as it is fetched from the database and filled into the form fields. During this process, I display a loading icon to in ...

What are the steps to reset the Firebase server in order to allow the deployment of functions

After using firebase deploy --only functions, an error appeared in my React code and I had to use control-C to stop the deployment on my Mac. Now, when attempting to redeploy to Google servers, the following error is encountered: firebase.js -> build/f ...