Skip to content

Instantly share code, notes, and snippets.

@injms

injms/index.js

Last active June 4, 2021 12:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save injms/0651ca487c704cc4b90b8c70c24adfe0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save injms/0651ca487c704cc4b90b8c70c24adfe0 to your computer and use it in GitHub Desktop.
Download ZIP
Screenshot diffr
Raw
index.js
const playwright = require('playwright')
const Jimp = require('jimp')
const enableJavaScript = true
const domains = {
live: 'https://www.gov.uk',
preview: 'http://collections.dev.gov.uk' // Change this to your development URL
}
const FRONTEND_URLS = [
'/settle-in-the-uk',
'/settle-in-the-uk/y',
'/settle-in-the-uk/y/you-re-the-family-member-or-partner-of-a-british-citizen',
'/settle-in-the-uk/y/you-re-the-family-member-or-partner-of-a-british-citizen/yes/on-a-work-visa/a-tier-1-tier-2-or-tier-5-visa',
'/register-to-vote',
'/vehicle-tax',
'/find-a-job',
'/',
'/tour',
'/help',
'/help/cookies',
'/help/ab-testing',
'/foreign-travel-advice',
'/find-local-council',
'/roadmap',
'/guidance/hire-out-horses-licence-england',
'/premises-licence',
'/temporary-events-notice',
'/apply-skip-permit',
'/street-collection-licence',
'/zoo-licence',
'/premises-licence-scotland',
'/house-to-house-collection-licence',
'/public-charitable-collection-permit-scotland',
'/late-hours-catering-licence-scotland',
'/food-business-registration',
'/cooling-tower-notification',
'/performing-animals-registration',
'/done/transaction-finished',
'/done/driving-transaction-finished',
'/done/check-settled-status',
'/done/register-flood-risk-exemption',
'/done/waste-carrier-or-broker-registration',
'/done/register-waste-exemption',
'/bank-holidays',
'/when-do-the-clocks-change'
]
const COLLECTIONS_URLS = [
'/government/people/adam-sewell-jones',
'/government/people/alan-aubrey',
'/browse',
'/transition',
'/transition.cy',
'/browse/benefits',
'/browse/benefits/manage-your-benefit',
'/coronavirus',
'/coronavirus/worker-support',
'/coronavirus/business-support',
'/coronavirus/education-and-childcare',
'/eubusiness',
'/topic/oil-and-gas/finance-and-taxation/latest',
'/topic/personal-tax/trusts/latest',
'/government/organisations/cabinet-office',
'/government/people/david-cameron',
'/government/ministers/prime-minister',
'/government/ministers/secretary-of-state-for-defence',
'/government/organisations/hm-revenue-customs/services-information',
'/learn-to-drive-a-car',
'/topic/oil-and-gas/fields-and-wells',
'/topic/oil-and-gas/environment-reporting-and-regulation',
'/topic/oil-and-gas/finance-and-taxation',
'/childcare-parenting',
'/work',
'/education',
'/topic/oil-and-gas',
'/topic/legal-aid-for-providers',
'/topic/schools-colleges-childrens-services',
'/world/japan',
'/world/living-in-afghanistan',
'/browse/benefits/manage-your-benefit',
'/browse/justice/courts-sentencing-tribunals',
'/browse/abroad/living-abroad',
// '/government/organisations',
]
const fullURLS = COLLECTIONS_URLS.map(url => {
const rtrn = {}
for (const liveOrPreview in domains) {
rtrn[liveOrPreview] = domains[liveOrPreview] + url
}
return rtrn
})
const screenshots = []
; (async () => {
// for (const browserType of ['chromium', 'firefox', 'webkit']) {
for (const browserType of ['firefox']) {
const browser = await playwright[browserType].launch()
const context = await browser.newContext({
viewport: {
width: 1080,
height: 720,
deviceScaleFactor: 2,
isMobile: false
},
javaScriptEnabled: enableJavaScript,
})
const page = await context.newPage()
page.setDefaultNavigationTimeout(1000 * 180)
for (const urls of fullURLS) {
const liveOrPreviewScreenshot = []
let name = ''
for (const liveOrPreview in urls) {
await page.goto(urls[liveOrPreview], {
waitUntil: 'load',
})
const cookieBar = await page.isVisible('#global-cookie-message')
if (cookieBar && enableJavaScript) {
await page.click('.govuk-button-group > .gem-c-button')
await page.click('.gem-c-cookie-banner__hide-button')
}
await page.evaluate(function () {
document.getElementById('user-satisfaction-survey-container').style.display = 'none'
})
const title = await page.title()
const pageHeight = await page.evaluate(function () {
return Math.max(
document.body.scrollHeight,
document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight,
)
})
// Playwright can't take a screenshot if the page height is more than
// 32767 pixels
if (pageHeight < 32767) {
console.log(`Taking screenshot of ${urls[liveOrPreview]}`)
const screenshot = await page.screenshot({
// path: `./screenshots/${title.toLowerCase()} - ${liveOrPreview} - ${browserType}.png`,
fullPage: true
})
const thisURL = new URL(urls[liveOrPreview])
const safeURL = thisURL.pathname.replace(/^\//, '').replace(/\//g, '__')
liveOrPreviewScreenshot.push(screenshot)
name = `${safeURL} - ${browserType}`
// await page.close()
} else {
console.log(`${urls[liveOrPreview]} too large - height (${pageHeight}) exceeds 32,767 pixels`)
}
}
screenshots.push([name, liveOrPreviewScreenshot].flat())
}
screenshots.forEach(async ([name, live, preview]) => {
try {
const liveJ = await Jimp.read(live)
const previewJ = await Jimp.read(preview)
const diff = Jimp.diff(liveJ, previewJ, 0.1) // threshold ranges 0-1 (default: 0.1)
await diff.image.writeAsync(`./screenshots/${name} diff.png`)
await liveJ.writeAsync(`./screenshots/${name} live.png`)
await previewJ.writeAsync(`./screenshots/${name} preview.png`)
} catch (error) {
console.error(`Error occured on ${name}`)
console.error(error)
}
})
await browser.close()
}
})()
Raw
package.json
{
"name": "screenshotr",
"version": "0.8.5",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ian James, https://inj.ms",
"license": "UNLICENSED",
"description": "",
"dependencies": {
"jimp": "^0.16.1",
"playwright": "^1.9.2",
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment