fix: use faker instead of Math.random, simply playwright config

package.json

@@ -53,6 +53,7 @@
     "@commitlint/config-conventional": "^19.4.1",
     "@commitlint/cz-commitlint": "^19.4.0",
     "@eslint-react/eslint-plugin": "^1.14.0",
+    "@faker-js/faker": "^9.0.3",
     "@next/bundle-analyzer": "^14.2.9",
     "@next/eslint-plugin-next": "^14.2.9",
     "@percy/cli": "1.29.3",

playwright.config.ts

@@ -15,19 +15,16 @@ export default defineConfig({
   testMatch: '*.@(spec|e2e).?(c|m)[jt]s?(x)',
   // Timeout per test
   timeout: 30 * 1000,
-  // Run tests in files in parallel on CI
-  fullyParallel: !!process.env.CI,
   // Fail the build on CI if you accidentally left test.only in the source code.
   forbidOnly: !!process.env.CI,
-  // Retry on CI only
-  retries: process.env.CI ? 2 : 0,
-  // Opt out of parallel tests on CI
-  workers: process.env.CI ? 1 : undefined,
-  // Limit the number of failures on CI to save resources
-  maxFailures: process.env.CI ? 10 : undefined,
   // Reporter to use. See https://playwright.dev/docs/test-reporters
   reporter: process.env.CI ? 'github' : 'list',
 
+  expect: {
+    // Set timeout for async expect matchers
+    timeout: 10 * 1000,
+  },
+
   // Run your local dev server before starting the tests:
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
   webServer: {
@@ -44,7 +41,10 @@ export default defineConfig({
     baseURL,
 
     // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
-    trace: 'on-first-retry',
+    trace: process.env.CI ? 'retain-on-failure' : undefined,
+
+    // Record videos when retrying the failed test.
+    video: process.env.CI ? 'retain-on-failure' : undefined,
   },
 
   projects: [
@@ -58,10 +58,6 @@ export default defineConfig({
             name: 'firefox',
             use: { ...devices['Desktop Firefox'] },
           },
-          {
-            name: 'webkit',
-            use: { ...devices['Desktop Safari'] },
-          },
         ]
       : []),
   ],

src/app/[locale]/(auth)/layout.tsx

@@ -11,6 +11,7 @@ export default function AuthLayout(props: {
   let signInUrl = '/sign-in';
   let signUpUrl = '/sign-up';
   let dashboardUrl = '/dashboard';
+  let afterSignOutUrl = '/';
 
   if (props.params.locale === 'fr') {
     clerkLocale = frFR;
@@ -20,6 +21,7 @@ export default function AuthLayout(props: {
     signInUrl = `/${props.params.locale}${signInUrl}`;
     signUpUrl = `/${props.params.locale}${signUpUrl}`;
     dashboardUrl = `/${props.params.locale}${dashboardUrl}`;
+    afterSignOutUrl = `/${props.params.locale}${afterSignOutUrl}`;
   }
 
   return (
@@ -29,6 +31,7 @@ export default function AuthLayout(props: {
       signUpUrl={signUpUrl}
       signInFallbackRedirectUrl={dashboardUrl}
       signUpFallbackRedirectUrl={dashboardUrl}
+      afterSignOutUrl={afterSignOutUrl}
     >
       {props.children}
     </ClerkProvider>

src/templates/BaseTemplate.stories.tsx

@@ -6,12 +6,10 @@ import messages from '@/locales/en.json';
 
 import { BaseTemplate } from './BaseTemplate';
 
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
   title: 'Example/BaseTemplate',
   component: BaseTemplate,
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
   tags: ['autodocs'],

tests/e2e/Counter.e2e.ts

@@ -1,5 +1,6 @@
 import assert from 'node:assert';
 
+import { faker } from '@faker-js/faker';
 import { expect, test } from '@playwright/test';
 
 test.describe('Counter', () => {
@@ -26,7 +27,7 @@ test.describe('Counter', () => {
     }) => {
       // `x-e2e-random-id` is used for end-to-end testing to make isolated requests
       // The default value is 0 when there is no `x-e2e-random-id` header
-      const e2eRandomId = Math.floor(Math.random() * 1000000000) + 1;
+      const e2eRandomId = faker.number.int({ max: 1000000 });
       await page.setExtraHTTPHeaders({
         'x-e2e-random-id': e2eRandomId.toString(),
       });

tests/e2e/I18n.e2e.ts

@@ -1,27 +1,29 @@
 import { expect, test } from '@playwright/test';
 
 test.describe('I18n', () => {
-  test.describe('Static pages', () => {
-    test('should take screenshot of the homepage', async ({ page }) => {
+  test.describe('Language Switching', () => {
+    test('should switch language from English to French using dropdown and verify text on the homepage', async ({ page }) => {
       await page.goto('/');
 
       await expect(
         page.getByRole('heading', { name: 'Boilerplate Code for Your Next.js Project with Tailwind CSS' }),
       ).toBeVisible();
 
-      await page.getByRole('link', { name: 'About' }).click();
+      await page.getByLabel('lang-switcher').selectOption('fr');
 
-      await expect(page.getByText('Welcome to our About page')).toBeVisible();
+      await expect(
+        page.getByRole('heading', { name: 'Code de démarrage pour Next.js avec Tailwind CSS' }),
+      ).toBeVisible();
+    });
 
-      await page.getByRole('combobox', { name: 'lang-switcher' }).selectOption({ label: 'FR' });
+    test('should switch language from English to French using URL and verify text on the sign-in page', async ({ page }) => {
+      await page.goto('/sign-in');
 
-      await expect(page.getByText('Bienvenue sur notre page À propos')).toBeVisible();
+      await expect(page.getByText('Email address')).toBeVisible();
 
-      await page.getByRole('link', { name: 'Accueil' }).click();
+      await page.goto('/fr/sign-in');
 
-      await expect(
-        page.getByRole('heading', { name: 'Code de démarrage pour Next.js avec Tailwind CSS' }),
-      ).toBeVisible();
+      await expect(page.getByText('Adresse e-mail')).toBeVisible();
     });
   });
 });

tests/e2e/Visual.e2e.ts

@@ -41,7 +41,7 @@ test.describe('Visual testing', () => {
       await percySnapshot(page, 'Portfolio details');
     });
 
-    test('i18n fr language', async ({ page }) => {
+    test('should take screenshot of the French homepage', async ({ page }) => {
       await page.goto('/fr');
 
       await expect(

tests/integration/Counter.spec.ts

@@ -1,3 +1,4 @@
+import { faker } from '@faker-js/faker';
 import { expect, test } from '@playwright/test';
 
 test.describe('Counter', () => {
@@ -43,7 +44,7 @@ test.describe('Counter', () => {
     }) => {
       // `x-e2e-random-id` is used for end-to-end testing to make isolated requests
       // The default value is 0 when there is no `x-e2e-random-id` header
-      const e2eRandomId = Math.floor(Math.random() * 1000000000) + 1;
+      const e2eRandomId = faker.number.int({ max: 1000000 });
 
       let counter = await request.put('/api/counter', {
         data: {

tsconfig.json

@@ -53,7 +53,12 @@
       }
     ]
   },
-  "exclude": ["./out/**/*", "./node_modules/**/*", "**/*.spec.ts", "**/*.e2e.ts"],
+  "exclude": [
+    "./out/**/*",
+    "./node_modules/**/*",
+    "**/*.spec.ts",
+    "**/*.e2e.ts"
+  ],
   "include": [
     "next-env.d.ts",
     "**/*.ts",