Playwright: Enable Advanced Settings and Capture Full Settings Page

test/playwright/visual.spec.js

@@ -44,6 +44,28 @@ test('visual', async ({page, extensionId}) => {
     // Take a screenshot of the settings page with jmdict loaded
     await expect.soft(page).toHaveScreenshot('settings-jmdict-loaded.png', {mask: [storage_locator]});
 
+    // Enable advanced settings
+    // Wait for the advanced settings to be visible
+    await page.locator('input#advanced-checkbox').evaluate((/** @type {HTMLInputElement} */ element) => element.click());
+
+    // Get page height by getting the footer and adding height and y position as other methods of calculation don't work for some reason
+    const footer = /** @type {import('@playwright/test').ElementHandle<HTMLElement>} */ (await page.locator('.footer-padding').elementHandle());
+    expect(footer).not.toBe(null);
+    const boundingBox = /** @type {NonNullable<Awaited<ReturnType<import('@playwright/test').ElementHandle<HTMLElement>['boundingBox']>>>} */ (await footer.boundingBox());
+    expect(boundingBox).not.toBe(null);
+    const pageHeight = Math.ceil(boundingBox.y + boundingBox.height);
+
+    await page.setViewportSize({width: 1280, height: pageHeight});
+
+    // Wait for any animations or changes to complete
+    await page.waitForTimeout(500);
+
+    // Take a full page screenshot of the settings page with advanced settings enabled
+    await expect.soft(page).toHaveScreenshot('settings-fresh-full-advanced.png', {
+        fullPage: true,
+        mask: [storage_locator],
+    });
+
     /**
      * @param {number} doc_number
      * @param {number} test_number