Capture an entire webpage screenshot with Webdrivercss

When trying to capture a screenshot of an entire webpage, I encountered a challenge. The code I used below with Firefox successfully took a screenshot of the whole page, but it didn't work with Chrome. According to the API documentation, I should use webdrivercss, but I'm unsure about how to do that. Can anyone provide assistance on how to modify this code for capturing screenshots using Chrome?

var webdriverio = require('webdriverio');
var options = {
    desiredCapabilities: {
        browserName: 'chrome'
    }
};
var size;
webdriverio
    .remote(options)
    .init()
    .windowHandleMaximize(false)
    .url('http://webdriver.io/')
    .saveScreenshot('./chrome.png')
    .end();

I would greatly appreciate any help offered.

Answer №1

Below is a sample code snippet:

const wdio = require('webdriverio');
const wdcss = require('webdrivercss');
const options = {
  desiredCapabilities: {
    browserName: 'chrome'
  }
};

const browser = wdio.remote(options);

wdcss.init(browser, {
  screenshotRoot: './',
  screenWidth: [1024]
});

client.init()
  .windowHandleMaximize(false)
  .url('http://webdriver.io/')
  .webdrivercss('chrome-screenshot', {
    name:'some_id',
    elem:'body'
  }, function(err, res){}))
  .saveScreenshot('chrome-screenshot')
  .end();

To learn more about the capabilities of webdrivercss, head over to their github page. The documentation provided there is quite insightful. I have encountered issues with rendering screenshots using chromedriver. Nevertheless, phantomjs proved to be a reliable alternative.

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

Creating a route provider tailored to specific user roles

I have a rather straightforward requirement. There are 3 different User Roles: CATUSER LICUSER ALLUSER The User Role value is stored in the $rootScope.userRole variable. The User Role is predefined before the AngularJS application starts as the Angula ...

What is the most effective way to extract data that includes an array within it?

const flightList = [{ number: 343, from: "Singapore", to: "India", upgradeTypes: ["Economy to Premium Economy", "Economy to Business Class"] }, . { number: 363, from: "Chennai", to: "Sing ...

Having trouble with Axios PUT request not sending complete data to the server using JavaScript

One issue I'm encountering is that when sending an axios request with specific data, not all of the data gets updated in the user model. Here's a look at my code: Here is the Front-End code with axios request: import axios from "axios" ...

Body-Processing Protocol

When I send a cURL POST request, it looks like this: curl http://tarvos.local:8080/partial_Users/2 -d '{currentPage : 1, firstID : 53d62fc6642aecf45c8b456f }' Within my NodeJS application, the request passes through the bodyParser.json() middl ...

What steps should I take to address the error message "TypeError: express-validator is not a function

I am currently utilizing express-validator version 6.4.0 and encountering an error when running the server. I have attempted to implement custom validation by organizing separate files for validator, controller, and routes. Here is the primary server file ...

Unable to locate AngularJS controller

As my single controller started to become too large, I decided to split it into multiple controllers. However, when I try to navigate to /signup, I encounter an issue where my UserController cannot be found. The error message states: Error: [ng:areq] Argu ...

Error in ReactJS: Attempting to access property 'preventDefault' of an undefined value

Looking to implement a simple onClick event/function in ReactJS. Upon clicking the button, I intend to execute a function named "onClick", but I encounter this error message in the console: app.js:62 Uncaught TypeError: Cannot read property 'prevent ...

Issue with jquery's .load() and getScript functions

Earlier today, I encountered an issue with a .load() function being called in a script. I managed to solve the problem using .getScript(), but now I'm facing a major issue - the function is being executed multiple times. You can find the full code a ...

WebDriverException: The 'chromedriver.exe' executable could be lacking proper permissions

After searching through several threads on this topic, I have spent the last three days attempting to resolve an issue with no success. Here is what I am dealing with: I am working on creating a Google Play review scraper for my research using this script ...

Issues with implementing Rails 4 with jQuery, javascript, and coffee scripts causing functionality to malfunction

Although I have nearly two decades of experience in C/C++ for control systems and firmware, as well as proficiency in shell and perl scripting, I am new to rails and web development. Despite including jquery in the application.js manifest, I am unable to ...

Find the button for uploading files using Selenium

I am encountering an issue with trying to click the button displayed below (image and HTML). Despite attempting to locate it using both xpath and ID, Selenium is still unable to find it. https://i.stack.imgur.com/KMMku.png <input id="wsUpload1" type= ...

Encountering issues with JSON.Parse in JavaScript leads to errors

I'm encountering issues with JSON parsing in my code and I can't figure out the cause of it. I have a function that calls two ajax functions, one at the start and another in the success function. Everything seems to be working fine until I try to ...

The <a href="#divtagid"> link is incapable of triggering the opening of the div tag when called from JavaScript

I need help with displaying the content of a div with the id "hello" in maindiv when clicking on the href "Click Here", but it's not working as expected. Here is the code I have: $(document).ready(function() { var newhtml = '<a href="#he ...

Hide the overlay fullscreen menu upon clicking an anchor link

I'm having trouble with Javascript, but some of you might find this easy. I found a fullscreen overlay menu on Codepen and I'm trying to figure out how to close it when clicking an anchor link. Looking for assistance with adding javascript to c ...

What is the best way to determine which CSS class is shown when the page is loaded using JQuery?

I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...

The sweetalert 2 input field is unresponsive or disabled within a materializecss modal, making it impossible to type in

My modal includes a SweetAlert2 popup when I click the "add bills" button. The code for this feature is from their documentation, so I don't believe the issue lies there. However, I am experiencing a problem where the input field is not type-able and ...

Displaying an array of data using ng-repeat, only showing records where the value is found within a field of another object

Within my project, I am working with two types of objects: 'ing' containing fields 'id' and 'field', and 'fObj' containing a field named 'contain'. Using ng-repeat, I am trying to display only those ' ...

Is there a method to establish varied usage permissions for a single page without any tracking?

I am puzzled by how a solution could create something like this. My goal is to have a webpage displaying 2 squares on a large screen. There will be 2 users, each needing access to write in their own square only on this page. <div class="square1"> ...

Exploring ways to utilize removeEventListener in React Native

Can someone assist me with converting this code to React? I am new to using React and struggling with the implementation. Thank you in advance! <progress id="bar" value="0" max="110"></progress> <button onClick={i ...

The list countdown for loop only appears in the initial iteration

Hey there, I'm currently facing an issue with duplicating my JavaScript countdowns and displaying images of cards on each loop iteration. Strangely, the countdown only appears in the first instance even though it's within the loop. I'm seeki ...