Fix E2E tests (#4044)

gregberge · web-flow · commit f49b0af3fea4 · 2026-02-25T09:57:47.000+01:00
diff --git a/packages/gitbook/e2e/internal.spec.ts b/packages/gitbook/e2e/internal.spec.ts
@@ -149,6 +149,7 @@ const searchTestCases: Test[] = [
                 mode: CustomizationAIMode.Assistant,
             },
         }),
+        screenshot: false,
         run: async (page) => {
             await waitForCookiesDialog(page);
             const searchInput = page.locator('css=[data-testid="search-input"]');
@@ -185,6 +186,7 @@ const searchTestCases: Test[] = [
                 mode: CustomizationAIMode.Assistant,
             },
         }),
+        screenshot: false,
         run: async (page) => {
             await waitForCookiesDialog(page);
             await page.keyboard.press('ControlOrMeta+I');
@@ -218,6 +220,7 @@ const searchTestCases: Test[] = [
                 mode: CustomizationAIMode.Assistant,
             },
         })}&ask=`,
+        screenshot: false,
         run: async (page) => {
             await waitForCookiesDialog(page);
             await expect(page.getByTestId('search-input')).not.toBeFocused();
@@ -235,6 +238,7 @@ const searchTestCases: Test[] = [
                 mode: CustomizationAIMode.Assistant,
             },
         })}&ask=${encodeURIComponent(AI_PROMPT)}`,
+        screenshot: false,
         run: async (page) => {
             await waitForCookiesDialog(page);
             await expect(page.getByTestId('search-input')).not.toBeFocused();
diff --git a/packages/gitbook/src/components/Ads/AdCoverRendering.tsx b/packages/gitbook/src/components/Ads/AdCoverRendering.tsx
@@ -77,7 +77,8 @@ export async function AdCoverRendering({
                         'shadow-md',
                         'max-h-32',
                         'group-hover/ad:max-h-16',
-                        'motion-safe:transition-all'
+                        'transition-all',
+                        'motion-reduce:transition-none'
                     )}
                 />
             </div>
@@ -93,7 +94,8 @@ export async function AdCoverRendering({
                         'opacity-0',
                         'group-hover/ad:h-16',
                         'group-hover/ad:opacity-10',
-                        'motion-safe:transition-all'
+                        'transition-all',
+                        'motion-reduce:transition-none'
                     )}
                 >
                     {ad.description}
diff --git a/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx b/packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx
@@ -34,7 +34,7 @@ export function AnnouncementBanner(props: {
             className="theme-bold:bg-header-background pt-4 pb-2"
             data-nosnippet=""
         >
-            <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+            <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
                 <div className={tcls('relative', CONTAINER_STYLE)}>
                     <Tag
                         href={contentRef?.href ?? ''}
diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
@@ -82,7 +82,8 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 'sm:left-auto',
                 'lg:chat-open:mr-80',
                 'xl:chat-open:mr-100',
-                'motion-safe:transition-all',
+                'transition-all',
+                'motion-reduce:transition-none',
                 'duration-300',
                 'text-sm'
             )}
diff --git a/packages/gitbook/src/components/Embeddable/EmbeddableFrame.tsx b/packages/gitbook/src/components/Embeddable/EmbeddableFrame.tsx
@@ -120,7 +120,7 @@ export function EmbeddableFrameSidebar(props: { children: React.ReactNode }) {
     const { children } = props;
 
     return (
-        <div className="flex w-15 shrink-0 origin-top not-hydrated:animate-blur-in-slow flex-col gap-2 overflow-hidden border-tint-solid/3 border-r bg-tint-solid/1 p-2 transition-all transition-discrete duration-300 empty:hidden empty:w-0 empty:px-0">
+        <div className="flex w-15 shrink-0 origin-top not-hydrated:animate-blur-in-slow flex-col gap-2 overflow-hidden border-tint-solid/3 border-r bg-tint-solid/1 p-2 transition-all transition-discrete duration-300 empty:hidden empty:w-0 empty:px-0 motion-reduce:transition-none">
             {children}
         </div>
     );
diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx
@@ -35,7 +35,7 @@ export function Footer(props: { context: GitBookSiteContext }) {
                 mobileOnly ? 'xl:hidden' : null
             )}
         >
-            <div className="motion-safe:transition-[padding] motion-safe:duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+            <div className="transition-[padding] duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
                 <div
                     className={tcls(
                         CONTAINER_STYLE,
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
@@ -68,7 +68,7 @@ export function Header(props: {
                     'site-header:theme-bold:shadow-tint-12/2'
                 )}
             >
-                <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
                     <div
                         data-gb-header-content
                         className={tcls(
@@ -82,7 +82,7 @@ export function Header(props: {
                             'min-h-16',
                             'sm:h-16',
                             CONTAINER_STYLE,
-                            'transition-[max-width] duration-300',
+                            'transition-[max-width] duration-300 motion-reduce:transition-none',
                             '@container/header'
                         )}
                     >
@@ -120,7 +120,7 @@ export function Header(props: {
                                 'justify-self-end',
                                 'items-center',
                                 'gap-2',
-                                'transition-[margin] duration-300',
+                                'transition-[margin] duration-300 motion-reduce:transition-none',
                                 'search' in customization.styling &&
                                     customization.styling.search === 'prominent'
                                     ? [
@@ -201,7 +201,7 @@ export function Header(props: {
             </div>
 
             {visibleSections && withSections ? (
-                <div className="transition-[padding] duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
+                <div className="transition-[padding] duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">
                     <SiteSectionTabs sections={encodeClientSiteSections(context, visibleSections)}>
                         {variants.translations.length > 1 ? (
                             <TranslationsDropdown
diff --git a/packages/gitbook/src/components/PDF/ImagesLoadingStatus.tsx b/packages/gitbook/src/components/PDF/ImagesLoadingStatus.tsx
@@ -11,7 +11,7 @@ export function ImagesLoadingStatus(props: {
     const { language } = props;
     const state = useImagesLoadingState();
     return (
-        <p className="text-right text-slate-500 text-xs">
+        <p className="text-right text-slate-500 text-xs" data-visual-test="removed">
             {(() => {
                 switch (state.status) {
                     case 'pending':
diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx
@@ -59,7 +59,7 @@ export function PageAside(props: {
                 'hydrated:starting:max-w-0',
                 'hydrated:starting:opacity-0',
 
-                'transition-[margin,max-width,opacity,display] duration-300',
+                'transition-[margin,max-width,opacity,display] duration-300 motion-reduce:transition-none',
                 'transition-discrete',
 
                 'basis-56',
diff --git a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
@@ -73,6 +73,7 @@ export function ScrollSectionsList({ sections }: { sections: DocumentSection[] }
                             'px-3',
 
                             'transition-all',
+                            'motion-reduce:transition-none',
                             'duration-200',
 
                             'rounded-md',
diff --git a/packages/gitbook/src/components/PageBody/PageCover.tsx b/packages/gitbook/src/components/PageBody/PageCover.tsx
@@ -86,6 +86,7 @@ export async function PageCover(props: {
                 // Negative margin to balance the container padding
                 '-mx-4',
                 'transition-all',
+                'motion-reduce:transition-none',
                 as === 'full'
                     ? [
                           'sm:-mx-6',
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -121,7 +121,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
             <NavigationLoader />
             {customization.ai?.mode === CustomizationAIMode.Assistant ? <AIChat /> : null}
 
-            <div className="motion-safe:transition-all motion-safe:duration-300 lg:chat-open:mr-80 xl:chat-open:mr-96">
+            <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:mr-80 xl:chat-open:mr-96">
                 <div
                     className={tcls(
                         'flex',
@@ -130,7 +130,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                         'lg:justify-center',
                         CONTAINER_STYLE,
                         'site-width-wide:max-w-screen-4xl',
-                        'transition-[max-width] duration-300',
+                        'transition-[max-width] duration-300 motion-reduce:transition-none',
 
                         // Ensure the footer is display below the viewport even if the content is not enough
                         withFooter && [
diff --git a/packages/gitbook/src/components/primitives/Popover.tsx b/packages/gitbook/src/components/primitives/Popover.tsx
@@ -20,7 +20,7 @@ export function Popover(props: {
                     collisionPadding={contentProps?.collisionPadding ?? 16}
                     sideOffset={contentProps?.sideOffset ?? 4}
                     className={tcls(
-                        'z-50 max-h-(--radix-popover-content-available-height) max-w-xs animate-scale-in overflow-y-auto overflow-x-hidden circular-corners:rounded-3xl rounded-corners:rounded-md bg-tint px-4 py-3 text-sm text-tint depth-subtle:shadow-xl shadow-tint-12/4 outline-hidden ring-1 ring-tint transition-all empty:hidden data-[state="closed"]:animate-scale-out dark:shadow-tint-1/6',
+                        'z-50 max-h-(--radix-popover-content-available-height) max-w-xs animate-scale-in overflow-y-auto overflow-x-hidden circular-corners:rounded-3xl rounded-corners:rounded-md bg-tint px-4 py-3 text-sm text-tint depth-subtle:shadow-xl shadow-tint-12/4 outline-hidden ring-1 ring-tint transition-all empty:hidden data-[state="closed"]:animate-scale-out motion-reduce:transition-none dark:shadow-tint-1/6',
                         contentProps?.className
                     )}
                     style={{

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export function AnnouncementBanner(props: {`
`34`	`34`	`className="theme-bold:bg-header-background pt-4 pb-2"`
`35`	`35`	`data-nosnippet=""`
`36`	`36`	`>`
`37`		`- <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">`
	`37`	`+ <div className="transition-all duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">`
`38`	`38`	`<div className={tcls('relative', CONTAINER_STYLE)}>`
`39`	`39`	`<Tag`
`40`	`40`	`href={contentRef?.href ?? ''}`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export function Footer(props: { context: GitBookSiteContext }) {`
`35`	`35`	`mobileOnly ? 'xl:hidden' : null`
`36`	`36`	`)}`
`37`	`37`	`>`
`38`		`- <div className="motion-safe:transition-[padding] motion-safe:duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">`
	`38`	`+ <div className="transition-[padding] duration-300 motion-reduce:transition-none lg:chat-open:pr-80 xl:chat-open:pr-96">`
`39`	`39`	`<div`
`40`	`40`	`className={tcls(`
`41`	`41`	`CONTAINER_STYLE,`