headless and not headless mode are rendering the same page in a little different mode
See original GitHub issueSteps to reproduce
Tell us about your environment:
C:\src\jest-image-snapshot-example>npm list --depth=0
jest-image-snapshot-example@1.0.0 C:\src\jest-image-snapshot-example
+-- jest@24.9.0
+-- jest-image-snapshot@2.11.1
`-- puppeteer@2.0.0
C:\src\jest-image-snapshot-example>node --version
v12.13.0
Windows 10 64 bit updated.
What steps will reproduce the problem?
- clone this repository https://github.com/andreabisello/jest-image-snapshot-example and runs “headless-differences.test.js”. OR
- run this test, got the screenshot
- activate headless mode, got the screenshot.
const puppeteer = require('puppeteer')
const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });
describe('headless differences Test', () => {
test("headless and not headless screenshot should to be the same", async () => {
jest.setTimeout(15000)
browser = await puppeteer.launch({
headless: false,
defaultViewport: {width: 1800, height: 900},
args: ["--start-maximized"],
devtools: false
})
page = await browser.newPage()
await page.goto("https://legaltest.solutiondocondemand.com", {
timeout: 20000,
waitUntil: ['load', 'domcontentloaded', 'networkidle0', 'networkidle2']
})
loginBox = await page.waitForSelector('#loginBox', {visible: true, timeout:30000})
//removing time variant area
await page.evaluate(() => {
document.querySelector('#lblNow').style.visibility = "hidden"
})
//taking screenshot
const loginBoxScreenshot = await loginBox.screenshot()
expect(loginBoxScreenshot).toMatchImageSnapshot({
failureThreshold: 0,
failureThresholdType: "percent"
})
await browser.close()
})
})
What is the expected result?
this test will open a url and take a screenshot of the login form. There should be no differences in the login form in headless or not headless mode.
What happens instead?
even i removed the time variant part of the page ( the one with the data ) , screenshot are ~1% different.
Differences are
- fonts rendering.
- Login button have a kind of yellow border
Issue Analytics
- State:
- Created 4 years ago
- Comments:17
Top Results From Across the Web
Chrome Browser Headless problem : Some specific pages are ...
I am trying to automate a process using selenium and chrome browser in Python. My browser works correctly for most pages but is...
Read more >Useful tools: Headless Chrome & puppeteer for browser ...
Running Chrome in headless mode is then as easy as a single command line flag --headless . The only other argument you'll need...
Read more >Web Scraping with a Headless Browser: A Puppeteer Tutorial
In this article, we'll see how easy it is to perform web scraping (web automation) with the somewhat non-traditional method of using a...
Read more >Selenium Headless Browser Testing - Tools QA
Headless browsers don't mimic the exact user behavior, as the page doesn't render precisely with all the dependencies that it will render in...
Read more >Headless Chrome: an answer to server-side rendering JS sites
Headless Chrome can be a drop-in solution for turning dynamic JS sites into static HTML pages. Running it on a web server allows...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I also have differences between same screenshots when I change the headless property. This is my case:
Screenshots are already platform dependent (e.g., you would get slight differences on Mac vs Windows vs Linux) and different modes are not supposed to be identical. Also, please try using the new headless mode (
headless: chrome
) that is meant to be the same browser implementation as the headful mode. The old headless mode is actually a different browser underneath.