feat: configure japa browser client

.adonisrc.json

@@ -46,9 +46,9 @@
   "tests": {
     "suites": [
       {
-        "name": "functional",
+        "name": "browser",
         "files": [
-          "tests/functional/**/*.spec(.ts|.js)"
+          "tests/browser/**/*.spec(.ts|.js)"
         ],
         "timeout": 60000
       }

package.json

@@ -15,6 +15,7 @@
     "@alpinejs/focus": "^3.13.0",
     "@babel/core": "^7.22.11",
     "@babel/preset-env": "^7.22.14",
+    "@japa/browser-client": "^1.2.0",
     "@japa/preset-adonis": "^1.2.0",
     "@japa/runner": "^2.5.1",
     "@symfony/webpack-encore": "^4.4.0",
@@ -27,6 +28,7 @@
     "eslint-plugin-adonis": "^2.1.1",
     "eslint-plugin-prettier": "^5.0.0",
     "pino-pretty": "^10.2.0",
+    "playwright": "^1.37.1",
     "postcss-loader": "^7.3.3",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.3.3",

test.ts

@@ -38,7 +38,7 @@ kernel
         setup: app.concat(runnerHooks.setup),
         teardown: runnerHooks.teardown,
       },
-      cwd: kernel.application.appRoot
+      cwd: kernel.application.appRoot,
     })
 
     run()

tests/bootstrap.ts

@@ -6,6 +6,7 @@
  */
 
 import type { Config } from '@japa/runner'
+import { browserClient } from '@japa/browser-client'
 import TestUtils from '@ioc:Adonis/Core/TestUtils'
 import { assert, runFailedTests, specReporter, apiClient } from '@japa/preset-adonis'
 
@@ -20,7 +21,14 @@ import { assert, runFailedTests, specReporter, apiClient } from '@japa/preset-ad
 | Feel free to remove existing plugins or add more.
 |
 */
-export const plugins: Required<Config>['plugins'] = [assert(), runFailedTests(), apiClient()]
+export const plugins: Required<Config>['plugins'] = [
+  assert(),
+  runFailedTests(),
+  apiClient(),
+  browserClient({
+    runInSuites: ['browser'],
+  }),
+]
 
 /*
 |--------------------------------------------------------------------------
@@ -60,10 +68,10 @@ export const runnerHooks: Pick<Required<Config>, 'setup' | 'teardown'> = {
 | within ".adonisrc.json" file.
 |
 | You can use this method to configure suites. For example: Only start
-| the HTTP server when it is a functional suite.
+| the HTTP server when it is a browser suite.
 */
 export const configureSuite: Required<Config>['configureSuite'] = (suite) => {
-  if (suite.name === 'functional') {
+  if (suite.name === 'browser') {
     suite.setup(() => TestUtils.httpServer().start())
   }
 }

tests/browser/hello_world.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@japa/runner'
+
+test('display welcome page', async ({ visit }) => {
+  const page = await visit('/')
+  await page.assertExists(page.getByRole('link', { name: 'Log In' }))
+  await page.assertExists(page.getByRole('link', { name: 'Sign Up' }))
+})