Capturing full-page screenshots with Protractor in Angular 8

Currently, I am facing an issue while trying to capture a screenshot of an Angular page using protractor and mocha. Our team has integrated protractor-screenshot-utils as a dependency and added the necessary code in the conf.js file to modify the browser.takeScreenshot();

onPrepare: function() {
    global.screenShotUtils = new screenShotUtils({
      browserInstance : browser,
      setAsDefaultScreenshotMethod : true 
    });
},

However, it seems that this approach does not fully override the default behavior, resulting in an incomplete screenshot of the Angular page (works fine for non-angular pages). The captured screenshot only displays what is visible in the browser viewport, excluding the rest of the page content, which brings me to my query...

I am wondering if there are alternative methods or workarounds to successfully capture a full-page screenshot of an Angular page using a combination of protractor and mocha?

typescriptseleniumprotractorautomated-testsmocha.js

Answer №1

If you're having trouble with your web browser, particularly Chrome, it could be an issue with your navigator. Read more about potential solutions here

One workaround that may help is to adjust the browser window size using this code snippet:

browser.driver.manage().window().setSize(320, 2000);

For further assistance, I recommend checking out this resource on taking screenshots of entire pages in Protractor: How to take screenshot of entire page in Protractor?

Answer №2

I once encountered a similar issue and came up with a solution using a custom method in C# to capture screenshots by scrolling and stitching them together. It may seem cumbersome, but it gets the job done when needed. The process can be summarized as follows:

  1. Take note of the height and width of the webpage
  2. Check if you have reached the bottom of the page
  3. Capture and save a screenshot
  4. Scroll down by the height value
  5. Repeat STEP NO 2

Alternatively, there are third-party libraries available that can help simplify this task.

While I don't have the script readily accessible, you can refer to these useful resources for more information - protractor.screenshot.reporter.js (from this StackOverflow answer), protractor-screenshot-utils, takeFullPageScreenShot method

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

Custom Type Guard Leads to Intersection Type Outcome

Recently, I've been experimenting with Typescript and decided to explore the creation of an innovative Either type that could distinguish between success and failure scenarios. Utilizing a user-defined type guard, I managed to precisely narrow down th ...

typescript

Capturing Timeout error in selenium testing

Currently, I'm utilizing the PhantomJS webdriver in a C# WinForms project. One key difference between PhantomJS and Firefox is that PhantomJS will proceed with the code execution even if the webpage has not fully loaded. To ensure it runs only when t ...

c#seleniumselenium-webdriver

Locating a particular table without an identifier

Recently, I've started working on a selenium project and I've encountered a roadblock. The webpage I am dealing with has three tables but I only need to extract data from one specific table. The challenge lies in the fact that all tables have the ...

javahtmlseleniumxpathhtml-table

Guide on capturing a screenshot of a specific WebElement on a webpage using Selenium without capturing the entire page or screen

Can someone help me with capturing a specific image of a website instead of the entire screen? I tried using the code below to capture the screenshot, but it ends up capturing the entire screen which doesn't solve my problem. WebDriver driver = new F ...

javaseleniumselenium-webdriverwebdriverashot

Python code to locate and click the submit button using Selenium when there is no id attribute

Having difficulty finding a way to click the submit button in this particular class. It lacks an ID, name, or any easily identifiable method that is not dynamically generated. Any assistance would be greatly appreciated. Here's what I have attempted ...

pythonseleniumbuttonsubmit

Issues with Selenium ActionChains functionality present on certain computers while working fine on others

Currently, I am working on a data scraping script using Selenium and Python. Interestingly, the following line of code functions perfectly on my Ubuntu PC, as well as my wife's Windows PC; however, it does not seem to work on my colleague's Windo ...

pythonselenium

Discovering the origins of the node.js native modules and delving into the intricacies of typed modules

I am using a Windows machine and trying to locate where node fetches the source code for native modules. On my system, I can only find the @types file which contains "Typed Only" modules. For example, the module "assert" is available in the master/lib fold ...

node.jstypescriptnpm

What is the reason behind the absence of compile time errors when using 'string' functions on an 'any' field type variable in TypeScript?

Looking at the following typescript code snippet: let a; a = "number"; let t = a.endsWith('r'); console.log(t); It is worth noting that since variable 'a' is not declared with a specific type, the compiler infers it as ...

javascripttypescripttypescript-types

Queries with MongoDB RegEx fail to return any matches if the search string contains parentheses

When trying to implement case-insensitivity using regex, it seems to work well for plain strings. However, if special characters like parenthesis are involved in the search query for the name, the database returns no results. For example, a search for "Pu ...

javascripttypescriptmongodbmongoose

Error: Trying to access a property that is not declared on an empty object

Using a fully patched Visual Studio 2013, I am integrating JQuery, JQueryUI, JSRender, and TypeScript into my project. However, I am encountering an error in the ts file: Property 'fadeDiv' does not exist on type '{}'. While I believ ...

typescript

Ensuring type compatibility in a declarative manner: What are the methods?

My goal is to establish a compile-time constraint that ensures a variable of type T2 can be assigned to a variable of type T1. If I have a value (t2) of type T2, I can simply do the following: const t1: T1 = t2; Is there an alternative method to achiev ...

typescript

Issue with Selenium WebDriver: Expectation failure while waiting for element visibility at specified location(..)

I'm facing a little issue with my automated test. Whenever the test encounters an error like this: Expected condition failed: waiting for visibility of element located by(...) I find it difficult to pinpoint the exact problem. @BeforeMethod pub ...

javacssseleniumselenium-webdriver

Set a generic function type to a variable

Currently, I am facing an issue where I have a declared function type with generics that I want to assign to a named arrow function. Below is an example of the code: import { AutocompleteProps } from '@material-ui/lab/Autocomplete'; const itemTo ...

javascripttypescriptmaterial-uiautocomplete

Selenium - incapability to select the subsequent page

I'm experiencing difficulties with clicking the next button (>) and repeating this process until reaching the last page. Despite researching similar issues, I have been unable to identify what's causing my code to malfunction. Below is the co ...

pythonseleniumselenium-webdriverweb-scrapingselenium-chromedriver

Tips for pinpointing specific components inside a bespoke directive using protractor

Below is the unique custom directive I am currently utilizing: <custom-select custom-model="newStuff"> <div ng-if="itemsLoaded"> <select ng-disabled="model.disabled" data-placeholder="test" class="select-search select2-hid ...

angularjsautomationprotractorfunctional-testing

Adding a value to an array in TypeScript

When trying to add values to an array in my code, I encountered an error stating that "number" is not a valid type for the array. someArray: Array <{ m: number, d: Date}> = []; this.someArray.push(500,new Date(2020,1,15)); ...

arraysangulartypescript

What are the steps to lift non-React statics using TypeScript and styled-components?

In my code, I have defined three static properties (Header, Body, and Footer) for a Dialog component. However, when I wrap the Dialog component in styled-components, TypeScript throws an error. The error message states: Property 'Header' does no ...

javascriptreactjstypescriptstyled-components

Exploring the File Selection Dialog in Node.js with TypeScript

Is it possible to display a file dialog in a Node.js TypeScript project without involving a browser or HTML? In my setup, I run the project through CMD and would like to show a box similar to this image: https://i.stack.imgur.com/nJt3h.png Any suggestio ...

javascriptnode.jswindowstypescriptfile

Rearrange Material UI styles in a separate file within a React project

Currently, I am developing an application utilizing material-ui, React, and Typescript. The conventional code for <Grid> looks like this: <Grid container direction="row" justifyContent="center" alignItems="center&q ...

javascriptreactjstypescriptmaterial-ui

Clicking on non-button elements using Selenium

I've been attempting to use Selenium and Java to click on the Like button of a Facebook post but have not been successful. Here is the code snippet I've tried: driver.navigate().to("https://www.facebook.com/DavidGuetta/posts/10153196593446356") ...

javafacebookselenium