fix: Isolate Styleguide snapshots

packages/code-studio/src/styleguide/Dialog.tsx

@@ -63,7 +63,7 @@ class Dialog extends Component<unknown, DialogState> {
 
   renderChild(): React.ReactElement {
     return (
-      <div {...sampleSectionIdAndClasses('dialog', ['p-3'])}>
+      <div className="p-3">
         <h4>Sample Child</h4>
         <div className="form-group">
           <label htmlFor="exampleInput1">
@@ -89,7 +89,7 @@ class Dialog extends Component<unknown, DialogState> {
     const { isShown, checkBoxMap } = this.state;
 
     return (
-      <div>
+      <div {...sampleSectionIdAndClasses('dialog')}>
         <h2 className="ui-title">Popover Dialog</h2>
         <p>
           Popover dialog that can contain interactive elements, can be set to

packages/code-studio/src/styleguide/StyleGuide.tsx

@@ -39,8 +39,20 @@ const stickyProps = {
 } as const;
 
 function StyleGuide(): React.ReactElement {
+  const isolateSection = window.location.search.includes('isolateSection=true');
+
   return (
     <div className="container style-guide-container">
+      {/* For e2e tests this allows us to isolate sections for snapshots. This 
+      mitigates an issue where a change to a section in the styleguide can cause
+      subtle pixel shifts in other sections */}
+      {isolateSection && (
+        <style>
+          {`.${HIDE_FROM_E2E_TESTS_CLASS}, .sample-section:not(${window.location.hash}), :not(.sample-section) > h2 {
+          display: none;
+        }`}
+        </style>
+      )}
       <Flex
         justifyContent="space-between"
         alignItems="center"

tests/styleguide.spec.ts

@@ -1,25 +1,44 @@
 /* eslint-disable no-await-in-loop */
-import { expect, Locator, Page, test } from '@playwright/test';
-import { HIDE_FROM_E2E_TESTS_CLASS } from './utils';
+import { expect, Page, test } from '@playwright/test';
 
 let page: Page;
-let sampleSections: Locator;
+const sampleSectionIds: string[] = [];
+const buttonSectionIds: string[] = [];
 
-test.beforeEach(async ({ browser }, testInfo) => {
+test.beforeAll(async ({ browser }) => {
   page = await browser.newPage();
+
   await page.goto('/ide/styleguide');
 
-  sampleSections = page.locator('.sample-section');
-  await expect(sampleSections).toHaveCount(39);
+  // Get the ids of the sample sections
+  const sampleSections = page.locator('.sample-section');
+  const expectedSampleSectionsCount = 40;
+  await expect(sampleSections).toHaveCount(expectedSampleSectionsCount);
 
-  const hide = await page.locator(`.${HIDE_FROM_E2E_TESTS_CLASS}`).all();
+  sampleSectionIds.length = 0;
+  for (let i = 0; i < expectedSampleSectionsCount; i += 1) {
+    const sampleSection = sampleSections.nth(i);
+    const id = String(await sampleSection.getAttribute('id'));
+    sampleSectionIds.push(id);
+  }
 
-  hide.forEach(locator =>
-    locator.evaluate(el => {
-      // eslint-disable-next-line no-param-reassign
-      el.style.opacity = '0';
-    })
-  );
+  // Get the ids of the button sections
+  const buttonSections = page.locator('[id^="sample-section-buttons-"]');
+  const expectedButtonSectionsCount = 4;
+  await expect(buttonSections).toHaveCount(expectedButtonSectionsCount);
+
+  buttonSectionIds.length = 0;
+  for (let i = 0; i < expectedButtonSectionsCount; i += 1) {
+    const buttonSection = buttonSections.nth(i);
+    const id = String(await buttonSection.getAttribute('id'));
+    buttonSectionIds.push(id);
+  }
+
+  await page.close();
+});
+
+test.beforeEach(async ({ browser }) => {
+  page = await browser.newPage();
 });
 
 test.afterEach(async () => {
@@ -28,16 +47,16 @@ test.afterEach(async () => {
 
 // Iterate over all sample sections and take a screenshot of each one.
 test('UI regression test - Styleguide sections', async () => {
-  const sampleSectionCount = await sampleSections.count();
+  for (let i = 0; i < sampleSectionIds.length; i += 1) {
+    const id = sampleSectionIds[i];
 
-  for (let i = 0; i < sampleSectionCount; i += 1) {
-    const sampleSection = sampleSections.nth(i);
-    const id = String(await sampleSection.getAttribute('id'));
+    // Isolate the section
+    await page.goto(`/ide/styleguide?isolateSection=true#${id}`);
 
-    // Scroll to the section. This is technically not necessary, but it mimics
-    // the user experience a little better and mimics the behavior of the fixed
-    // menu + scroll-to-top button that change based on scroll position.
-    await page.goto(`/ide/styleguide#${id}`);
+    // Have to reload since we are calling in a loop and only the hash is changing
+    await page.reload();
+
+    const sampleSection = page.locator(`#${id}`);
 
     await expect(sampleSection).toHaveScreenshot(
       `${id.replace(/^sample-section-/, '')}.png`
@@ -46,16 +65,17 @@ test('UI regression test - Styleguide sections', async () => {
 });
 
 test('Buttons regression test', async () => {
-  await page.goto('/ide/styleguide#sample-section-buttons-regular');
+  // Test focus and hover states for each enabled button
+  for (let i = 0; i < buttonSectionIds.length; i += 1) {
+    const id = buttonSectionIds[i];
 
-  const buttonSections = page.locator('[id^="sample-section-buttons-"]');
+    // Isolate the section
+    await page.goto(`/ide/styleguide?isolateSection=true#${id}`);
 
-  await expect(buttonSections).toHaveCount(4);
+    // Need to reload since we are calling in a loop and only the hash is changing
+    await page.reload();
 
-  // Test focus and hover states for each enabled button
-  const buttonSectionCount = await buttonSections.count();
-  for (let i = 0; i < buttonSectionCount; i += 1) {
-    const section = buttonSections.nth(i);
+    const section = page.locator(`#${id}`);
     const buttons = section.locator('button');
 
     const buttonCount = await buttons.count();
@@ -92,7 +112,7 @@ test('Buttons regression test', async () => {
 });
 
 test('Inputs regression test', async () => {
-  await page.goto('/ide/styleguide#sample-section-inputs');
+  await page.goto('/ide/styleguide?isolateSection=true#sample-section-inputs');
 
   const columns = page.locator('#sample-section-inputs .col');