fix: update playwright tests again (#1665)

.github/actions/turbo-ignore/action.yml

@@ -46,10 +46,11 @@ runs:
         fi
 
         if [ ! -f last-deploy.txt ]; then
-          echo "continue=1" >> $GITHUB_OUTPUT
-          exit 0
+          FALLBACK="main"
+        else
+          FALLBACK=$(cat last-deploy.txt)
         fi
 
         set +e
-        pnpx turbo-ignore ${{ inputs.package }} --fallback=$(cat last-deploy.txt)
+        pnpx turbo-ignore ${{ inputs.package }} --fallback=$FALLBACK
         echo "continue=$?" >> $GITHUB_OUTPUT

.github/workflows/deploy-docs-bundle-preview.yml

@@ -30,7 +30,7 @@ jobs:
 
   deploy:
     needs: ignore
-    if: needs.ignore.outputs.continue == 1
+    if: needs.ignore.outputs.continue == 1 || contains(github.event.head_commit.message, 'playwright/') || contains(github.event.head_commit.message, '.github/workflows/deploy-docs-bundle-preview') || contains(github.event.head_commit.message, '.github/workflows/playwright')
     runs-on: ubuntu-latest
     environment:
       name: Preview - app.buildwithfern.com
@@ -96,7 +96,7 @@ jobs:
         uses: dawidd6/action-download-artifact@v2
         if: success() && github.event.number
         with:
-          workflow: Preview @fern-ui/docs-bundle
+          name: analyze
           branch: ${{ github.event.pull_request.base.ref }}
           path: packages/ui/docs-bundle/.next/analyze/base
 
@@ -140,17 +140,7 @@ jobs:
       - ignore
       - deploy # only runs on fern-prod
     if: always()
-    runs-on: ubuntu-latest
-    permissions: write-all # required for the playwright-report-summary action
-    steps:
-      # if the job is ignored, skip the ETE test and exit 0 so that the this job can be used for merge protection
-      - uses: actions/checkout@v4
-        if: needs.deploy.outputs.deployment_url
-
-      - name: Run E2E tests
-        uses: ./.github/actions/ete-docs-bundle
-        if: needs.deploy.outputs.deployment_url
-        with:
-          deployment_url: ${{ needs.deploy.outputs.deployment_url }}
-          token: ${{ secrets.VERCEL_TOKEN }}
-          fern_token: ${{ secrets.FERN_TOKEN }}
+    uses: ./.github/workflows/playwright.yml
+    permissions: write-all
+    with:
+      deployment_url: ${{ needs.deploy.outputs.deployment_url }}

.github/workflows/deploy-docs-bundle-prod.yml

@@ -72,20 +72,21 @@ jobs:
   ete:
     needs:
       - deploy_app_buildwithfern_com # only the app.buildwithfern.com deployment is an E2E candidate but ideally all deployments should be tested
-      - deploy_app_ferndocs_com
-      - deploy_app-slash_ferndocs_com
       - promote
     if: needs.deploy_app_buildwithfern_com.outputs.deployment_url
+    uses: ./.github/workflows/playwright.yml
+    permissions: write-all
+    with:
+      deployment_url: ${{ needs.deploy_app_buildwithfern_com.outputs.deployment_url }}
+
+  rollback:
+    needs: ete
+    if: failure()
     runs-on: ubuntu-latest
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
     steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/ete-docs-bundle
-        with:
-          deployment_url: ${{ needs.deploy_app_buildwithfern_com.outputs.deployment_url }}
-          token: ${{ secrets.VERCEL_TOKEN }}
-          fern_token: ${{ secrets.FERN_TOKEN }}
       - name: Rollback on failure # remove this step once we switch back to pre-promotion testing
-        if: failure()
         run: |
           echo "E2E tests failed. Rolling back deployment"
           pnpm vercel-scripts rollback app.buildwithfern.com --token ${{ secrets.VERCEL_TOKEN }}

.github/workflows/playwright.yml

@@ -1,50 +1,43 @@
-name: Playwright Tests
-on: pull_request
+name: Playwright
 
 env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: "buildwithfern"
+  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
   FERN_TOKEN: ${{ secrets.FERN_TOKEN }}
-  WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
-  WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
-  # HUME_API_KEY: ${{ secrets.HUME_API_KEY }}
+  PLAYWRIGHT_JSON_OUTPUT_NAME: results.json
+
+on:
+  workflow_call:
+    inputs:
+      deployment_url:
+        type: string
+        description: "The URL of the deployment to test"
+        required: true
 
 jobs:
-  test:
-    timeout-minutes: 10
+  ete:
     runs-on: ubuntu-latest
     permissions: write-all # required for the playwright-report-summary action
+    if: inputs.deployment_url
     steps:
       - uses: actions/checkout@v4
 
-      - name: Install
-        uses: ./.github/actions/install
+      - uses: ./.github/actions/install
 
-      - name: Compile and build
-        run: pnpm turbo compile codegen build
-        env:
-          FERN_TOKEN: ${{ secrets.FERN_TOKEN }}
-          WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
-          WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
+      - name: Install Fern CLI (used for docs e2e)
+        run: pnpm i -g fern-api@latest
 
-      - name: Build next bundle
-        run: cd packages/ui/local-preview-bundle; pnpm turbo build
+      - name: Fetch domains
+        run: pnpm vercel-scripts domains.txt ${{ inputs.deployment_url }}
 
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+      - run: pnpm build
 
-      - name: Install fern-dev API
-        env:
-          NPM_TOKEN: ${{ secrets.FERN_NPM_TOKEN }}
-          FERN_TOKEN: ${{ secrets.FERN_ORG_TOKEN_DEV }}
-        run: |
-          npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN
-          npm install -g @fern-api/fern-api-dev
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps --browser=chromium
 
       - name: Run Playwright tests
-        run: PLAYWRIGHT_JSON_OUTPUT_NAME=results.json pnpm exec playwright test playwright/fixtures --reporter json
+        run: pnpm exec playwright test playwright --workers 1 --reporter json
 
       - uses: daun/playwright-report-summary@v3
         if: always()
         with:
-          report-file: results.json
+          report-file: $PLAYWRIGHT_JSON_OUTPUT_NAME

package.json

@@ -30,7 +30,6 @@
     "docs:dev": "turbo docs:dev",
     "docs:build": "turbo docs:build",
     "docs:start": "turbo docs:start",
-    "docs:e2e": "vitest --run test/docs-e2e/**/* --globals",
     "fdr:generate": "pnpm fern generate --api fdr --local && pnpm turbo --filter=@fern-api/fdr-sdk compile"
   },
   "devDependencies": {

packages/ui/components/src/FernScrollArea.scss

@@ -15,7 +15,10 @@
 
         > div {
             display: block !important;
-            width: fit-content;
+
+            // TODO: this seems to be causing a bug where the scroll area always shrinks the content
+            // but i'm not sure why this was introduced in the first place.
+            // width: fit-content;
             flex-grow: 1;
         }
 

packages/ui/docs-bundle/src/middleware.ts

@@ -18,76 +18,70 @@ const CHANGELOG_PATTERN = /\.(rss|atom)$/;
 export const middleware: NextMiddleware = async (request) => {
     const xFernHost = getDocsDomainEdge(request);
     const nextUrl = request.nextUrl.clone();
-    const headers = new Headers(request.headers);
+
+    let pathname = extractNextDataPathname(removeTrailingSlash(request.nextUrl.pathname));
 
     /**
-     * Do not rewrite 404 and 500 pages
+     * Correctly handle 404 and 500 pages
+     * so that nextjs doesn't incorrectly match this request to __next_data_catchall
      */
-    if (
-        removeTrailingSlash(request.nextUrl.pathname) === "/404" ||
-        removeTrailingSlash(request.nextUrl.pathname) === "/500"
-    ) {
-        return NextResponse.next();
+    if (pathname === "/404" || pathname === "/500" || pathname === "/_error") {
+        const headers = new Headers(request.headers);
+
+        if (request.headers.get("referer")?.includes("/_next/data/")) {
+            headers.set("x-nextjs-data", "1");
+        }
+
+        if (pathname === request.nextUrl.pathname) {
+            return NextResponse.next({ request: { headers } });
+        }
+        nextUrl.pathname = pathname;
+        const response = NextResponse.rewrite(nextUrl, { request: { headers } });
+        response.headers.set("x-matched-path", pathname);
+        return response;
     }
 
     /**
      * Rewrite robots.txt
      */
-    if (nextUrl.pathname.endsWith("/robots.txt")) {
+    if (pathname.endsWith("/robots.txt")) {
         nextUrl.pathname = "/api/fern-docs/robots.txt";
-        return NextResponse.rewrite(nextUrl, { request: { headers } });
+        return NextResponse.rewrite(nextUrl);
     }
 
     /**
      * Rewrite sitemap.xml
      */
-    if (nextUrl.pathname.endsWith("/sitemap.xml")) {
+    if (pathname.endsWith("/sitemap.xml")) {
         nextUrl.pathname = "/api/fern-docs/sitemap.xml";
-        return NextResponse.rewrite(nextUrl, { request: { headers } });
+        return NextResponse.rewrite(nextUrl);
     }
 
     /**
      * Rewrite Posthog analytics ingestion
      */
-    if (nextUrl.pathname.includes("/api/fern-docs/analytics/posthog")) {
+    if (pathname.includes("/api/fern-docs/analytics/posthog")) {
         return rewritePosthog(request);
     }
 
     /**
      * Rewrite API routes to /api/fern-docs
      */
-    if (nextUrl.pathname.match(API_FERN_DOCS_PATTERN)) {
+    if (pathname.match(API_FERN_DOCS_PATTERN)) {
         nextUrl.pathname = request.nextUrl.pathname.replace(API_FERN_DOCS_PATTERN, "/api/fern-docs/");
-        return NextResponse.rewrite(nextUrl, { request: { headers } });
+        return NextResponse.rewrite(nextUrl);
     }
 
     /**
      * Rewrite changelog rss and atom feeds
      */
-    const changelogFormat = request.nextUrl.pathname.match(CHANGELOG_PATTERN)?.[1];
+    const changelogFormat = pathname.match(CHANGELOG_PATTERN)?.[1];
     if (changelogFormat != null) {
-        const pathname = request.nextUrl.pathname.replace(new RegExp(`.${changelogFormat}$`), "");
+        pathname = pathname.replace(new RegExp(`.${changelogFormat}$`), "");
         nextUrl.pathname = "/api/fern-docs/changelog";
         nextUrl.searchParams.set("format", changelogFormat);
         nextUrl.searchParams.set("path", pathname);
-        return NextResponse.rewrite(nextUrl, { request: { headers } });
-    }
-
-    const pathname = extractNextDataPathname(request.nextUrl.pathname);
-
-    /**
-     * attempt to rewrite /404 and /_error data routes to the correct destination,
-     * otherwise nextjs will match to `__next_data_catchall`.
-     *
-     * this is important for `hardNavigate404` to work, because it relies on knowing that the destination is /404.json
-     */
-    if ((pathname === "/404" || pathname === "/_error") && request.nextUrl.pathname.includes("/_next/data/")) {
-        const buildId = getBuildId(request);
-        nextUrl.pathname = `/_next/data/${buildId}${pathname}.json`;
-        if (nextUrl.pathname === request.nextUrl.pathname) {
-            return NextResponse.next({ request: { headers } });
-        }
-        return NextResponse.rewrite(nextUrl, { request: { headers } });
+        return NextResponse.rewrite(nextUrl);
     }
 
     const fernToken = request.cookies.get(COOKIE_FERN_TOKEN);
@@ -142,7 +136,7 @@ export const middleware: NextMiddleware = async (request) => {
 
         nextUrl.pathname = getPageRoutePath(!isDynamic, buildId, xFernHost, pathname);
 
-        const response = NextResponse.rewrite(nextUrl, { request: { headers } });
+        const response = NextResponse.rewrite(nextUrl);
 
         /**
          * Add x-matched-path header to the response to help with debugging
@@ -157,7 +151,7 @@ export const middleware: NextMiddleware = async (request) => {
      */
 
     nextUrl.pathname = getPageRoute(!isDynamic, xFernHost, pathname);
-    return NextResponse.rewrite(nextUrl, { request: { headers } });
+    return NextResponse.rewrite(nextUrl);
 };
 
 export const config = {

packages/ui/docs-bundle/src/server/pageRoutes.ts

@@ -13,13 +13,5 @@ export function getPageRouteMatch(ssg: boolean, buildId: string): string {
 
 export function getPageRoutePath(ssg: boolean, buildId: string, domain: string, pathname: string): string {
     const dataRoute = getAssetPathFromRoute(removeTrailingSlash(pathname), ".json");
-
-    /**
-     * Special case for 404 and 500 pages
-     */
-    if (dataRoute === "/404.json" || dataRoute === "/500.json") {
-        return `/_next/data/${buildId}${dataRoute}`;
-    }
-
     return `/_next/data/${buildId}/${ssg ? "static" : "dynamic"}/${domain}${dataRoute}`;
 }