diff --git a/packages/calendar/test/demos.screenshots-test.js b/packages/calendar/test/demos.screenshots-test.js
new file mode 100644
index 000000000..3a0f39540
--- /dev/null
+++ b/packages/calendar/test/demos.screenshots-test.js
@@ -0,0 +1,87 @@
+// @ts-nocheck
+/* globals capture getStoryPage */
+
+const selector = 'lion-calendar';
+
+describe('others-calendar', () => {
+  it('main', async () => {
+    const id = 'others-calendar--main';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('selected-date', async () => {
+    const id = 'others-calendar--selected-date';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('central-date', async () => {
+    const id = 'others-calendar--central-date';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('controlling-focus', async () => {
+    const id = 'others-calendar--controlling-focus';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await page.waitForSelector('button');
+    await page.evaluate(() => {
+      document.querySelector('button').click();
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-lower-limit', async () => {
+    const id = 'others-calendar--providing-lower-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-higher-limit', async () => {
+    const id = 'others-calendar--providing-higher-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('disabled-dates', async () => {
+    const id = 'others-calendar--disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('combined-disabled-datess', async () => {
+    const id = 'others-calendar--combined-disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+});
diff --git a/packages/select-rich/test/demos.screenshots-test.js b/packages/select-rich/test/demos.screenshots-test.js
index 6ef5ecb99..a1b3e31e6 100644
--- a/packages/select-rich/test/demos.screenshots-test.js
+++ b/packages/select-rich/test/demos.screenshots-test.js
@@ -12,6 +12,7 @@ describe('forms-select-rich', () => {
   it('main-opened', async () => {
     const id = `forms-select-rich--main`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -31,6 +32,7 @@ describe('forms-select-rich', () => {
   it('options-with-html-opened', async () => {
     const id = `forms-select-rich--options-with-html`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -45,6 +47,7 @@ describe('forms-select-rich', () => {
   it('many-options-with-scrolling-opened', async () => {
     const id = `forms-select-rich--many-options-with-scrolling`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -69,6 +72,7 @@ describe('forms-select-rich', () => {
   it('disabled-option-opened', async () => {
     const id = `forms-select-rich--disabled-option`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -83,6 +87,7 @@ describe('forms-select-rich', () => {
   it('validation', async () => {
     const id = `forms-select-rich--validation`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.updateComplete.then(() => {
diff --git a/screenshots/others/calendar/central-date.png b/screenshots/others/calendar/central-date.png
new file mode 100644
index 000000000..70f783f23
Binary files /dev/null and b/screenshots/others/calendar/central-date.png differ
diff --git a/screenshots/others/calendar/combined-disabled-dates.png b/screenshots/others/calendar/combined-disabled-dates.png
new file mode 100644
index 000000000..bdf762a9f
Binary files /dev/null and b/screenshots/others/calendar/combined-disabled-dates.png differ
diff --git a/screenshots/others/calendar/controlling-focus.png b/screenshots/others/calendar/controlling-focus.png
new file mode 100644
index 000000000..da4f1236e
Binary files /dev/null and b/screenshots/others/calendar/controlling-focus.png differ
diff --git a/screenshots/others/calendar/disabled-dates.png b/screenshots/others/calendar/disabled-dates.png
new file mode 100644
index 000000000..69b0b3936
Binary files /dev/null and b/screenshots/others/calendar/disabled-dates.png differ
diff --git a/screenshots/others/calendar/main.png b/screenshots/others/calendar/main.png
new file mode 100644
index 000000000..51a091c6d
Binary files /dev/null and b/screenshots/others/calendar/main.png differ
diff --git a/screenshots/others/calendar/providing-higher-limit.png b/screenshots/others/calendar/providing-higher-limit.png
new file mode 100644
index 000000000..9f7fbb9b9
Binary files /dev/null and b/screenshots/others/calendar/providing-higher-limit.png differ
diff --git a/screenshots/others/calendar/providing-lower-limit.png b/screenshots/others/calendar/providing-lower-limit.png
new file mode 100644
index 000000000..f432c6928
Binary files /dev/null and b/screenshots/others/calendar/providing-lower-limit.png differ
diff --git a/screenshots/others/calendar/selected-date.png b/screenshots/others/calendar/selected-date.png
new file mode 100644
index 000000000..f372c8e3c
Binary files /dev/null and b/screenshots/others/calendar/selected-date.png differ
diff --git a/scripts/screenshots/index.js b/scripts/screenshots/index.js
index ca1cb3bc4..3e43dc009 100644
--- a/scripts/screenshots/index.js
+++ b/scripts/screenshots/index.js
@@ -81,13 +81,18 @@ process.on('beforeExit', () => {
   serverPromise.then(server => server.close());
 });
 
-async function getPage(path) {
+async function getPage(path, cdp) {
   const browser = await browserPromise;
   const server = await serverPromise;
   const url = `http://127.0.0.1:${server.server.address().port}${path}`;
   log(`Creating a page for ${url}`);
   const page = await browser.newPage();
 
+  if (cdp) {
+    const client = await page.context().newCDPSession(page);
+    await client.send(cdp.command, cdp.parameters);
+  }
+
   // eslint-disable-next-line no-unused-vars
   page.on('console', msg => {
     if (msg._type !== 'debug') {
@@ -99,16 +104,15 @@ async function getPage(path) {
     }
   });
 
-  await page.goto(url);
-  await page.waitForTimeout(500);
+  await page.goto(url, { waitUntil: 'domcontentloaded' });
 
   log(`Page has been created`);
 
   return page;
 }
 
-async function getStoryPage(id) {
-  return getPage(`/iframe.html?id=${id}&viewMode=story`);
+async function getStoryPage(id, cdp) {
+  return getPage(`/iframe.html?id=${id}&viewMode=story`, cdp);
 }
 
 async function getClip({ page, selector, endClipSelector }) {
@@ -260,7 +264,29 @@ function createCapture() {
     if (!suite.page) {
       suite.page = await getPage(url);
     }
-    await page.waitForTimeout(500);
+    if (selector) {
+      await page.waitForSelector(selector);
+    }
+    if (endClipSelector) {
+      await page.waitForSelector(endClipSelector);
+    }
+    await page.evaluate(
+      async ([sel, endClipSel]) => {
+        if (sel) {
+          const el = document.querySelector(sel);
+          if (el && el.updateComplete) {
+            await el.updateComplete;
+          }
+        }
+        if (endClipSel) {
+          const el = document.querySelector(endClipSel);
+          if (el && el.updateComplete) {
+            await el.updateComplete;
+          }
+        }
+      },
+      [selector, endClipSelector],
+    );
     suite.clip = await getClip(suite);
 
     if (updateScreenshots) {