Merge pull request #6068 from alphagov/percy-snapshot-scope

Use scope option in percy snapshots

Author: owenatgov

shared/tasks/browser.mjs

@@ -72,6 +72,13 @@ export async function screenshots() {
 export async function screenshotComponent(browser, componentName, options) {
   const componentFiles = await getComponentFiles(componentName)
 
+  // Percy snapshot options
+  // Scope is .app-wihtespace-highlight rather than .govuk-main-wrapper like with
+  // the examples so that margin that isn't part of the component doesn't get
+  // included in the screenshot
+  /** @type {SnapshotOptions} */
+  const snapshotOptions = { scope: '.app-whitespace-highlight' }
+
   // Navigate to component
   const page = await goToComponent(browser, componentName, options)
 
@@ -81,15 +88,15 @@ export async function screenshotComponent(browser, componentName, options) {
     : componentName
 
   // Screenshot preview page (with JavaScript)
-  await percySnapshot(page, `js: ${screenshotName}`)
+  await percySnapshot(page, `js: ${screenshotName}`, snapshotOptions)
 
   // Check for "JavaScript enabled" components
   if (componentFiles.some(filterPath([`**/${componentName}.mjs`]))) {
     await page.setJavaScriptEnabled(false)
 
     // Screenshot preview page (without JavaScript)
     await page.reload({ waitUntil: 'load' })
-    await percySnapshot(page, `no-js: ${screenshotName}`)
+    await percySnapshot(page, `no-js: ${screenshotName}`, snapshotOptions)
   }
 
   // Close page
@@ -107,31 +114,16 @@ export async function screenshotComponent(browser, componentName, options) {
 export async function screenshotExample(browser, exampleName) {
   const page = await goToExample(browser, exampleName)
 
-  // Dismiss app banner
-  await page.setCookie({
-    name: 'dismissed-app-banner',
-    value: 'yes',
-    url: page.url()
-  })
-
-  await page.reload({ waitUntil: 'load' })
-
-  // Remove feature flag banner
-  await page.evaluate(() => {
-    const featureFlagBanner = document.querySelector('.app-feature-flag-banner')
-
-    if (featureFlagBanner) {
-      featureFlagBanner.remove()
-    }
-  })
-
   // Screenshot preview page
-  await percySnapshot(page, `js: ${exampleName} (example)`)
+  await percySnapshot(page, `js: ${exampleName} (example)`, {
+    scope: '.govuk-main-wrapper'
+  })
 
   // Close page
   return page.close()
 }
 
 /**
  * @import { Browser } from 'puppeteer'
+ * @import { SnapshotOptions } from '@percy/core'
  */