screenshots for the duckplayer overlay (#1030)

* screenshots for the duckplayer overlay

* linting

---------

Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>

integration-test/playwright/duckplayer-mobile.spec.js

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 import { DuckplayerOverlays } from './page-objects/duckplayer-overlays.js'
 
 test.describe('Video Player overlays', () => {
@@ -107,3 +107,17 @@ test.describe.skip('Translated Overlays', () => {
         })
     }
 })
+
+/**
+ * Use `npm run playwright-screenshots` to run this test only.
+ */
+test.describe('Overlay screenshot @screenshots', () => {
+    test('testing Overlay UI \'en\'', async ({ page }, workerInfo) => {
+        const overlays = DuckplayerOverlays.create(page, workerInfo)
+        await overlays.withRemoteConfig({ locale: 'en' })
+        await overlays.userSettingIs('always ask')
+        await overlays.gotoPlayerPage()
+        await page.locator('ddg-video-overlay-mobile').nth(0).waitFor()
+        await expect(page.locator('.html5-video-player')).toHaveScreenshot('overlay.png', { maxDiffPixels: 20 })
+    })
+})

package.json

@@ -40,7 +40,8 @@
     "posttest-int-x": "npm run test-int-x --workspaces --if-present",
     "serve": "http-server -c-1 --port 3220 integration-test/test-pages",
     "serve-special-pages": "http-server -c-1 --port 3221 build/integration/pages",
-    "playwright": "playwright test",
+    "playwright": "playwright test --grep-invert '@screenshots'",
+    "playwright-screenshots": "playwright test --grep '@screenshots'",
     "playwright-headed": "playwright test --headed",
     "preplaywright": "npm run build-windows && npm run build-apple && npm run build-android",
     "preplaywright-headed": "npm run build-windows && npm run build-apple && npm run build-android",