diff --git a/packages/calendar/test/demos.screenshots-test.js b/packages/calendar/test/demos.screenshots-test.js
index 59b6cf8aa..3a0f39540 100644
--- a/packages/calendar/test/demos.screenshots-test.js
+++ b/packages/calendar/test/demos.screenshots-test.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* globals capture getStoryPage */
 
 const selector = 'lion-calendar';
@@ -33,6 +34,7 @@ describe('others-calendar', () => {
         initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
       },
     });
+    await page.waitForSelector('button');
     await page.evaluate(() => {
       document.querySelector('button').click();
     });
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/scripts/screenshots/index.js b/scripts/screenshots/index.js
index 53be2b905..3e43dc009 100644
--- a/scripts/screenshots/index.js
+++ b/scripts/screenshots/index.js
@@ -104,8 +104,7 @@ async function getPage(path, cdp) {
     }
   });
 
-  await page.goto(url);
-  await page.waitForTimeout(500);
+  await page.goto(url, { waitUntil: 'domcontentloaded' });
 
   log(`Page has been created`);
 
@@ -265,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) {