Test/adjust false positives visual tests

packages/orbit-components/src/AirportIllustration/AirportIllustration.ct.tsx

@@ -4,8 +4,9 @@ import { test, expect } from "@playwright/experimental-ct-react";
 import AirportIllustration from "./AirportIllustration.ct-story";
 
 test.describe("visual AirportIllustration", () => {
-  test(`AirportIllustration`, async ({ mount }) => {
+  test(`AirportIllustration`, async ({ mount, page }) => {
     const component = await mount(<AirportIllustration />);
+    page.waitForRequest(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });

packages/orbit-components/src/ButtonMobileStore/ButtonMobileStore.ct.tsx

@@ -4,8 +4,9 @@ import { test, expect } from "@playwright/experimental-ct-react";
 import ButtonMobileStoreStory from "./ButtonMobileStore.ct-story";
 
 test.describe("visual ButtonMobileStoreStory", () => {
-  test("ButtonMobileStoreStory", async ({ mount }) => {
+  test("ButtonMobileStoreStory", async ({ mount, page }) => {
     const component = await mount(<ButtonMobileStoreStory />);
+    page.waitForRequest(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });

packages/orbit-components/src/CallOutBanner/CallOutBanner.ct.tsx

@@ -5,18 +5,20 @@ import CallOutBannerStory from "./CallOutBanner.ct-story";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 test.describe("visual CallOutBanner", () => {
-  test("default", async ({ mount }) => {
+  test("default", async ({ mount, page }) => {
     const component = await mount(<CallOutBannerStory />);
+    page.waitForRequest(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });
 
-  test("rtl", async ({ mount }) => {
+  test("rtl", async ({ mount, page }) => {
     const component = await mount(
       <RenderInRtl>
         <CallOutBannerStory />
       </RenderInRtl>,
     );
+    page.waitForRequest(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });

packages/orbit-components/src/CarrierLogo/CarrierLogo.ct.tsx

@@ -4,8 +4,9 @@ import { test, expect } from "@playwright/experimental-ct-react";
 import CarrierLogoStory from "./CarrierLogo.ct-story";
 
 test.describe("visual CarrierLogo", () => {
-  test("CarrierLogo", async ({ mount }) => {
+  test("CarrierLogo", async ({ mount, page }) => {
     const component = await mount(<CarrierLogoStory />);
+    page.waitForRequest(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });

packages/orbit-components/src/FeatureIcon/FeatureIcon.ct.tsx

@@ -4,8 +4,9 @@ import { test, expect } from "@playwright/experimental-ct-react";
 import FeatureIconStory from "./FeatureIcon.ct-story";
 
 test.describe("visual FeatureIcon", () => {
-  test("FeatureIcon", async ({ mount }) => {
+  test("FeatureIcon", async ({ mount, page }) => {
     const component = await mount(<FeatureIconStory />);
+    page.waitForRequest(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });

packages/orbit-components/src/Illustration/Illustration.ct.tsx

@@ -31,6 +31,9 @@ export const NAMES: Name[] = [
   "CompassSaveOnBooking",
   "CompassTravelPlan",
   "Damage",
+  "DepartureBoard",
+  "DepartureBoardBadge",
+  "DepartureBoardLounge",
   "DesktopSearch",
   "EnjoyApp",
   "Error",
@@ -102,29 +105,34 @@ export const NAMES: Name[] = [
 
 test.describe("visual Illustration", () => {
   NAMES.map(name =>
-    test(`Illustration ${name}`, async ({ mount }, info) => {
+    test(`Illustration ${name}`, async ({ mount, page }, info) => {
       if (info.project.name === "Small Mobile") {
         const component = await mount(<IllustrationStory name={name} size="extraSmall" />);
+        page.waitForRequest(/images.kiwi.com/);
         await expect(component).toHaveScreenshot();
       }
 
       if (info.project.name === "Medium Mobile" || info.project.name === "Large Mobile") {
         const component = await mount(<IllustrationStory name={name} size="small" />);
+        page.waitForRequest(/images.kiwi.com/);
         await expect(component).toHaveScreenshot();
       }
 
       if (info.project.name === "Tablet") {
         const component = await mount(<IllustrationStory name={name} size="medium" />);
+        page.waitForRequest(/images.kiwi.com/);
         await expect(component).toHaveScreenshot();
       }
 
       if (info.project.name === "Desktop") {
         const component = await mount(<IllustrationStory name={name} size="large" />);
+        page.waitForRequest(/images.kiwi.com/);
         await expect(component).toHaveScreenshot();
       }
 
       if (info.project.name === "Large Desktop") {
         const component = await mount(<IllustrationStory name={name} size="display" />);
+        page.waitForRequest(/images.kiwi.com/);
         await expect(component).toHaveScreenshot();
       }
     }),

packages/orbit-components/src/Modal/Modal.ct.tsx

@@ -10,21 +10,24 @@ import { SIZES } from "./consts";
 
 test.describe("visual Modal", () => {
   Object.values(SIZES).forEach(size => {
-    test(`ModalVisualDefaultStory ${size}`, async ({ mount }) => {
+    test(`ModalVisualDefaultStory ${size}`, async ({ mount, page }) => {
       const component = await mount(<ModalVisualDefaultStory size={size} />);
+      page.waitForResponse(/images.kiwi.com/);
 
       await expect(component).toHaveScreenshot();
     });
   });
 
-  test(`ModalVisualDefaultStory isMobileFullPage`, async ({ mount }) => {
+  test(`ModalVisualDefaultStory isMobileFullPage`, async ({ mount, page }) => {
     const component = await mount(<ModalVisualDefaultStory isMobileFullPage />);
+    page.waitForResponse(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });
 
-  test("ModalVisualMobileHeader", async ({ mount }) => {
+  test("ModalVisualMobileHeader", async ({ mount, page }) => {
     const component = await mount(<ModalVisualMobileHeader />);
+    page.waitForResponse(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });

packages/orbit-components/src/ServiceLogo/ServiceLogo.ct.tsx

@@ -4,8 +4,9 @@ import { test, expect } from "@playwright/experimental-ct-react";
 import ServiceLogoStory from "./ServiceLogo.ct-story";
 
 test.describe("visual ServiceLogo", () => {
-  test("default", async ({ mount }) => {
+  test("default", async ({ mount, page }) => {
     const component = await mount(<ServiceLogoStory />);
+    page.waitForRequest(/images.kiwi.com/);
 
     await expect(component).toHaveScreenshot();
   });