Merge pull request #2053 from oasisprotocol/lw/screenshot-size

Fix Chrome Webstore image dimensions
oasisprotocol · Sep 7, 2024 · dc5b937 · dc5b937
2 parents 899efa5 + aaf1f27
commit dc5b937
Show file tree

Hide file tree

Showing 10 changed files with 7 additions and 3 deletions.
diff --git a/.changelog/2053.trivial.md b/.changelog/2053.trivial.md
@@ -0,0 +1 @@
+Update screenshot size
diff --git a/playwright/screenshots/chrome-webstore-screenshots.spec.ts b/playwright/screenshots/chrome-webstore-screenshots.spec.ts
@@ -10,12 +10,12 @@ const screenshotCss = `
 `
 
 const chromeWebStoreDimensions = {
-  width: 1200,
+  width: 1280,
   height: 800,
 }
 
 /** Scale for higher quality larger screenshots */
-const deviceScaleFactor = (chromeWebStoreDimensions.height - 20) / extensionViewport.height
+const deviceScaleFactor = chromeWebStoreDimensions.height / extensionViewport.height
 test.use({
   deviceScaleFactor: deviceScaleFactor,
   viewport: {
@@ -36,7 +36,7 @@ async function setup(page: Page, url: string) {
       }
       iframe {
         width: ${extensionViewport.width}px;
-        height: ${extensionViewport.height}px;
+        height: ${extensionViewport.height * 0.975}px;
         border: 5px solid #0500e2;
       }
     </style>
@@ -53,6 +53,9 @@ test.beforeEach(async ({ context }) => {
 })
 
 test('make screenshots for Chrome Web Store', async ({ page }) => {
+  expect(page.viewportSize()!.width * deviceScaleFactor).toBe(chromeWebStoreDimensions.width)
+  expect(page.viewportSize()!.height * deviceScaleFactor).toBe(chromeWebStoreDimensions.height)
+
   const frame = await setup(page, `/`)
   await page.screenshot({
     path: './screenshots/extension-store-1.png',

diff --git a/playwright/screenshots/extension-store-1.png b/playwright/screenshots/extension-store-1.png
diff --git a/playwright/screenshots/extension-store-2.png b/playwright/screenshots/extension-store-2.png
diff --git a/playwright/screenshots/extension-store-3.png b/playwright/screenshots/extension-store-3.png
diff --git a/playwright/screenshots/extension-store-4.png b/playwright/screenshots/extension-store-4.png
diff --git a/playwright/screenshots/extension-store-5.png b/playwright/screenshots/extension-store-5.png
diff --git a/playwright/screenshots/extension-store-6.png b/playwright/screenshots/extension-store-6.png
diff --git a/playwright/screenshots/extension-store-7.png b/playwright/screenshots/extension-store-7.png
diff --git a/playwright/screenshots/extension-store-8.png b/playwright/screenshots/extension-store-8.png