setup playwright e2e tests

jam-ui/.gitignore

@@ -27,3 +27,4 @@ yarn-error.log*
 
 /.idea
 /.vscode
+/test-results

jam-ui/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

jam-ui/cypress/fixtures/notifications.json

@@ -0,0 +1,74 @@
+[
+  {
+    "description": "TEXT_MESSAGE",
+    "source_user_id": "27bd4a30-d1b8-4eea-8454-01a104d59381",
+    "target_user_id": "a09f9a7e-afb7-489d-870d-e13a336e0b97",
+    "session_id": null,
+    "recording_id": null,
+    "invitation_id": null,
+    "join_request_id": null,
+    "friend_request_id": null,
+    "band_id": null,
+    "band_invitation_id": null,
+    "formatted_msg": "TEXT_MESSAGE",
+    "message": "Hello",
+    "created_at": "2021-10-07T00:09:57.704Z",
+    "lesson_session_id": null,
+    "purpose": null,
+    "source_user": {
+      "name": "Nuwan Chaturanga"
+    },
+    "notification_id": "63fcd878-9a22-4419-9cee-8a51a615da97",
+    "fan_access": null,
+    "musician_access": null,
+    "approval_required": null
+  },
+  {
+    "description": "FRIEND_REQUEST",
+    "source_user_id": "a09f9a7e-afb7-489d-870d-e13a336e0b97",
+    "target_user_id": "b1ddadd0-0263-47c4-bf91-e7767f386970",
+    "session_id": null,
+    "recording_id": null,
+    "invitation_id": null,
+    "join_request_id": null,
+    "friend_request_id": "7c842904-24f5-4515-8886-0c3d25ee641b",
+    "band_id": null,
+    "band_invitation_id": null,
+    "formatted_msg": "Seth Call has sent you a friend request.",
+    "message": null,
+    "created_at": "2021-10-15T05:36:48.527Z",
+    "lesson_session_id": null,
+    "purpose": null,
+    "source_user": {
+        "name": "Seth Call"
+    },
+    "notification_id": "3364b5f1-8946-46a3-b635-86d89d237849",
+    "fan_access": null,
+    "musician_access": null,
+    "approval_required": null
+  },
+  {
+    "description": "FRIEND_REQUEST_ACCEPTED",
+    "source_user_id": "29becbf4-8be5-4078-9405-0edadc9fa42d",
+    "target_user_id": "b1ddadd0-0263-47c4-bf91-e7767f386970",
+    "session_id": null,
+    "recording_id": null,
+    "invitation_id": null,
+    "join_request_id": null,
+    "friend_request_id": null,
+    "band_id": null,
+    "band_invitation_id": null,
+    "formatted_msg": "Peter Walker has accepted your friend request.",
+    "message": null,
+    "created_at": "2021-10-05T12:38:53.134Z",
+    "lesson_session_id": null,
+    "purpose": null,
+    "source_user": {
+        "name": "Peter Walker"
+    },
+    "notification_id": "bb9269f3-721c-48cd-9bf6-bcff72877198",
+    "fan_access": null,
+    "musician_access": null,
+    "approval_required": null
+  }
+]

jam-ui/cypress/fixtures/profile.json

@@ -1,5 +0,0 @@
-{
-  "id": 8739,
-  "name": "Jane",
-  "email": "jane@example.com"
-}

jam-ui/cypress/fixtures/users.json

@@ -1,232 +0,0 @@
-[
-  {
-    "id": 1,
-    "name": "Leanne Graham",
-    "username": "Bret",
-    "email": "Sincere@april.biz",
-    "address": {
-      "street": "Kulas Light",
-      "suite": "Apt. 556",
-      "city": "Gwenborough",
-      "zipcode": "92998-3874",
-      "geo": {
-        "lat": "-37.3159",
-        "lng": "81.1496"
-      }
-    },
-    "phone": "1-770-736-8031 x56442",
-    "website": "hildegard.org",
-    "company": {
-      "name": "Romaguera-Crona",
-      "catchPhrase": "Multi-layered client-server neural-net",
-      "bs": "harness real-time e-markets"
-    }
-  },
-  {
-    "id": 2,
-    "name": "Ervin Howell",
-    "username": "Antonette",
-    "email": "Shanna@melissa.tv",
-    "address": {
-      "street": "Victor Plains",
-      "suite": "Suite 879",
-      "city": "Wisokyburgh",
-      "zipcode": "90566-7771",
-      "geo": {
-        "lat": "-43.9509",
-        "lng": "-34.4618"
-      }
-    },
-    "phone": "010-692-6593 x09125",
-    "website": "anastasia.net",
-    "company": {
-      "name": "Deckow-Crist",
-      "catchPhrase": "Proactive didactic contingency",
-      "bs": "synergize scalable supply-chains"
-    }
-  },
-  {
-    "id": 3,
-    "name": "Clementine Bauch",
-    "username": "Samantha",
-    "email": "Nathan@yesenia.net",
-    "address": {
-      "street": "Douglas Extension",
-      "suite": "Suite 847",
-      "city": "McKenziehaven",
-      "zipcode": "59590-4157",
-      "geo": {
-        "lat": "-68.6102",
-        "lng": "-47.0653"
-      }
-    },
-    "phone": "1-463-123-4447",
-    "website": "ramiro.info",
-    "company": {
-      "name": "Romaguera-Jacobson",
-      "catchPhrase": "Face to face bifurcated interface",
-      "bs": "e-enable strategic applications"
-    }
-  },
-  {
-    "id": 4,
-    "name": "Patricia Lebsack",
-    "username": "Karianne",
-    "email": "Julianne.OConner@kory.org",
-    "address": {
-      "street": "Hoeger Mall",
-      "suite": "Apt. 692",
-      "city": "South Elvis",
-      "zipcode": "53919-4257",
-      "geo": {
-        "lat": "29.4572",
-        "lng": "-164.2990"
-      }
-    },
-    "phone": "493-170-9623 x156",
-    "website": "kale.biz",
-    "company": {
-      "name": "Robel-Corkery",
-      "catchPhrase": "Multi-tiered zero tolerance productivity",
-      "bs": "transition cutting-edge web services"
-    }
-  },
-  {
-    "id": 5,
-    "name": "Chelsey Dietrich",
-    "username": "Kamren",
-    "email": "Lucio_Hettinger@annie.ca",
-    "address": {
-      "street": "Skiles Walks",
-      "suite": "Suite 351",
-      "city": "Roscoeview",
-      "zipcode": "33263",
-      "geo": {
-        "lat": "-31.8129",
-        "lng": "62.5342"
-      }
-    },
-    "phone": "(254)954-1289",
-    "website": "demarco.info",
-    "company": {
-      "name": "Keebler LLC",
-      "catchPhrase": "User-centric fault-tolerant solution",
-      "bs": "revolutionize end-to-end systems"
-    }
-  },
-  {
-    "id": 6,
-    "name": "Mrs. Dennis Schulist",
-    "username": "Leopoldo_Corkery",
-    "email": "Karley_Dach@jasper.info",
-    "address": {
-      "street": "Norberto Crossing",
-      "suite": "Apt. 950",
-      "city": "South Christy",
-      "zipcode": "23505-1337",
-      "geo": {
-        "lat": "-71.4197",
-        "lng": "71.7478"
-      }
-    },
-    "phone": "1-477-935-8478 x6430",
-    "website": "ola.org",
-    "company": {
-      "name": "Considine-Lockman",
-      "catchPhrase": "Synchronised bottom-line interface",
-      "bs": "e-enable innovative applications"
-    }
-  },
-  {
-    "id": 7,
-    "name": "Kurtis Weissnat",
-    "username": "Elwyn.Skiles",
-    "email": "Telly.Hoeger@billy.biz",
-    "address": {
-      "street": "Rex Trail",
-      "suite": "Suite 280",
-      "city": "Howemouth",
-      "zipcode": "58804-1099",
-      "geo": {
-        "lat": "24.8918",
-        "lng": "21.8984"
-      }
-    },
-    "phone": "210.067.6132",
-    "website": "elvis.io",
-    "company": {
-      "name": "Johns Group",
-      "catchPhrase": "Configurable multimedia task-force",
-      "bs": "generate enterprise e-tailers"
-    }
-  },
-  {
-    "id": 8,
-    "name": "Nicholas Runolfsdottir V",
-    "username": "Maxime_Nienow",
-    "email": "Sherwood@rosamond.me",
-    "address": {
-      "street": "Ellsworth Summit",
-      "suite": "Suite 729",
-      "city": "Aliyaview",
-      "zipcode": "45169",
-      "geo": {
-        "lat": "-14.3990",
-        "lng": "-120.7677"
-      }
-    },
-    "phone": "586.493.6943 x140",
-    "website": "jacynthe.com",
-    "company": {
-      "name": "Abernathy Group",
-      "catchPhrase": "Implemented secondary concept",
-      "bs": "e-enable extensible e-tailers"
-    }
-  },
-  {
-    "id": 9,
-    "name": "Glenna Reichert",
-    "username": "Delphine",
-    "email": "Chaim_McDermott@dana.io",
-    "address": {
-      "street": "Dayna Park",
-      "suite": "Suite 449",
-      "city": "Bartholomebury",
-      "zipcode": "76495-3109",
-      "geo": {
-        "lat": "24.6463",
-        "lng": "-168.8889"
-      }
-    },
-    "phone": "(775)976-6794 x41206",
-    "website": "conrad.com",
-    "company": {
-      "name": "Yost and Sons",
-      "catchPhrase": "Switchable contextually-based project",
-      "bs": "aggregate real-time technologies"
-    }
-  },
-  {
-    "id": 10,
-    "name": "Clementina DuBuque",
-    "username": "Moriah.Stanton",
-    "email": "Rey.Padberg@karina.biz",
-    "address": {
-      "street": "Kattie Turnpike",
-      "suite": "Suite 198",
-      "city": "Lebsackbury",
-      "zipcode": "31428-2261",
-      "geo": {
-        "lat": "-38.2386",
-        "lng": "57.2232"
-      }
-    },
-    "phone": "024-648-3804",
-    "website": "ambrose.net",
-    "company": {
-      "name": "Hoeger LLC",
-      "catchPhrase": "Centralized empowering task-force",
-      "bs": "target end-to-end models"
-    }
-  }
-]

jam-ui/cypress/integration/auth/signup_signin.spec.js

@@ -1,6 +1,5 @@
 /// <reference types="cypress" />
 
-import {email} from 'chance';
 
 describe('sign up and sign in', () => {
   it('redirects to rails app', () => {
@@ -36,7 +35,7 @@ describe('sign up and sign in', () => {
   // })
 })
 
-describe.only('Dashboard', () => {
+describe.only('Login to legacy app', () => {
   before(() => {
     cy.visit(`${Cypress.env('legacyBaseUrl')}/signin`)
     cy.get('.signin-form').first().within(() => {

jam-ui/cypress/integration/friends/friends-page.spec.js

@@ -16,13 +16,12 @@ describe('Friends page without data', () => {
   })
 })
 
-
 describe('Friends page with data', () => {
   beforeEach(() => {
     cy.stubAuthenticate({ id: '2'}); //currentUser id is 2 - people.yaml fixture
     cy.intercept('POST', /\S+\/filter/, { fixture: 'people' });
   });
-
+  
   describe('friends list', () => {
     beforeEach(() => {
       cy.visit('/friends');
@@ -125,6 +124,7 @@ describe('Friends page with data', () => {
       cy.get('[data-testid=profileSidePanel]')
         .find('[data-testid=connect]')
         .should('be.disabled');
+      cy.contains('Friend request was sent')
     });
 
     it('remove friend', () => {
@@ -189,15 +189,15 @@ describe('Friends page with data', () => {
           'text_messages_page2',
           'text_messages_page3'
         ]
-        // messageFixtures.forEach((fixture) => {
+        messageFixtures.forEach((fixture) => {
-        //   cy.fixture(fixture).then((json) => {
+          cy.fixture(fixture).then((json) => {
-        //     cy.intercept('GET', /\S+\/text_messages\S+/, json)
+            cy.intercept('GET', /\S+\/text_messages\S+/, json)
-        //     cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('bottom')
+            cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('bottom')
-        //     cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('top')
+            cy.get('.modal-body .ScrollbarsCustom').trigger('mouseover').scrollTo('top')
-        //     numberOfMessages = numberOfMessages + 10
+            numberOfMessages = numberOfMessages + 10
-        //     cy.get('.text-message-row').should('have.length', numberOfMessages)
+            cy.get('.text-message-row').should('have.length', numberOfMessages)
-        //   })
+          })
-        // })
+        })
         
         cy.get('button').contains('Close').should('not.be.disabled').click()
 
@@ -243,11 +243,11 @@ describe('Friends page with data', () => {
     })
 
     it.skip('shows received message by other user', () => {
-      //TODO: this should be test in e2e test (without faking backend api intractions)  
+      //TODO: this should be test in e2e test
     })
 
-
   })
+
 });
 
 

jam-ui/cypress/integration/layout/navigation.spec.js

@@ -22,7 +22,7 @@ describe("Top Navigation", () => {
 
     it("does not show user dropdown", () => {
       cy.contains("Signin to begin")
-      cy.get('a.btn').should('have.text', 'Signin')
+      cy.get('a.btn').should('have.text', 'Sign in')
       cy.get('[data-testid=navbarTopProfileDropdown]').should('not.exist')
     });
     
@@ -40,6 +40,25 @@ describe("Top Navigation", () => {
       showProfileDropdown()
     })
   })
+
+  describe('header notifications', () => {
+    beforeEach(() => {
+      cy.stubAuthenticate()
+      cy.intercept('GET', /\S+\/notifications/, { fixture: 'notifications'} )
+      cy.intercept('GET', /\S+\/profile\S+/, { fixture: 'person' });
+      cy.visit('/')
+    })
+
+    it('shows notifications', () => {
+      cy.get('[data-testid=notificationDropdown]').should('not.be.visible')
+      cy.get('.notification-indicator').trigger('mouseover')
+      cy.get('[data-testid=notificationDropdown]').should('be.visible')
+      cy.get('[data-testid=notificationDropdown] .list-group-item').should('have.length', 3)
+      cy.get('[data-testid=notificationDropdown]').contains('View all').click() //view all notifications
+      cy.url().should('include', '/notifications')
+    })
+  })
+
   
 });
 

jam-ui/package.json

@@ -80,12 +80,14 @@
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "scss": "gulp",
-    "analyze": "npx source-map-explorer 'build/static/js/*.js'"
+    "analyze": "npx source-map-explorer 'build/static/js/*.js'",
+    "test": "playwright test"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "devDependencies": {
+    "@playwright/test": "^1.15.2",
     "browser-sync": "^2.26.12",
     "eslint-config-prettier": "^4.2.0",
     "eslint-plugin-prettier": "^3.1.4",

jam-ui/playwright.config.ts

@@ -0,0 +1,57 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  globalSetup: require.resolve('./test/config/global-setup'),  
+  use: {
+    baseURL: 'http://beta.jamkazam.local:4000',
+    actionTimeout: 5000, 
+    headless: true,    
+    viewport: { width: 1280, height: 720},    
+    ignoreHTTPSErrors: true,    
+    video: 'on-first-retry',  
+  },
+};
+
+export default config;
+
+
+// const { devices } = require('@playwright/test');
+
+// /** @type {import('@playwright/test').PlaywrightTestConfig} */
+// const config = {
+//   testDir: './test',
+//   workers: 2,
+//   retries: 2,
+//   use: {
+//     headless: false,
+//     viewport: { width: 1280, height: 720 },
+//     launchOptions: {
+//       slowMo: 1000,
+//     },
+//     video:"on",
+//     },
+//   projects: [
+//     {
+//       name: 'Desktop Chromium',
+//       use: {
+//         browserName: 'chromium',
+//       },
+//     },
+//     {	name: 'Desktop Safari',      
+//       use: {
+//         browserName: 'webkit',
+//         viewport: { width: 1200, height: 750 },      
+//       }    
+//     },
+//     // Test against mobile viewports.
+//     { name: 'Mobile Chrome',      
+//       use: devices['Pixel 5'],    
+//     },
+//     {
+//       name: 'Mobile Safari',
+//       use: devices['iPhone 12'],
+//     },
+//   ],
+// };
+
+// module.exports = config;

jam-ui/src/components/navbar/JKNotificationDropdown.js

@@ -69,6 +69,7 @@ const JKNotificationDropdown = () => {
         limit: LIMIT
       };
       await dispatch(fetchNotifications(options)).unwrap();
+      console.log('NOTIFICATIONS', notifications);
       //setPage(prev => prev + 1);
     } catch (error) {
       console.log(error);
@@ -105,7 +106,7 @@ const JKNotificationDropdown = () => {
       >
         <FontAwesomeIcon icon="bell" transform="shrink-6" className="fs-4" />
       </DropdownToggle>
-      <DropdownMenu right className="dropdown-menu-card">
+      <DropdownMenu right className="dropdown-menu-card" data-testid="notificationDropdown">
         <Card className="card-notification shadow-none" style={{ maxWidth: '20rem' }}>
           <FalconCardHeader className="card-header" title="Notifications" titleTag="h6" light={false}>
             {/* <Link className="card-link font-weight-normal" to="#!">

jam-ui/src/components/notification/JKTextMessageNotification.js

@@ -25,7 +25,6 @@ function JKTextMessageNotification(props) {
       dispatch(fetchPerson({ userId: source_user_id }))
         .unwrap()
         .then(resp => {
-          console.log('after fetch person', resp);
           dispatch(addPerson(resp))
         })
         .catch(error => console.log(error));

jam-ui/src/components/profile/JKConnectButton.js

@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {addFriend as connect, removeFriend as disconnect} from '../../helpers/rest';
+import { toast } from 'react-toastify';
 
 const JKConnectButton = (props) => {
   const { user, currentUser, addContent, removeContent, cssClasses } = props
@@ -12,13 +13,17 @@ const JKConnectButton = (props) => {
   }, [user])
 
   const addFriend = () => {
+    setPendingFriendRequest(true)
     connect(currentUser.id, user.id)
     .then(resp => {
       if(resp.ok && resp.status === 201){
-        setPendingFriendRequest(true)
+        toast.success('Friend request was sent successfully')
       }
     })
-    .catch(err => console.log(err))
+    .catch(err => {
+      toast.error('An error encountered when sending friend request')
+      setPendingFriendRequest(false)
+    })
   }
 
   const removeFriend = () => {
@@ -26,15 +31,18 @@ const JKConnectButton = (props) => {
     .then(resp => {
       if(resp.ok){
         setIsFriend(false)
+        setPendingFriendRequest(false)
       }
     })
-    .catch(err => console.log(err))
+    .catch(err => {
+      toast.error('An error encountered when removing friend')
+    })
   }
 
   const buttonTitle = () => {
     let title;
     if (pendingFriendRequest) {
-      title = 'Thre is a pending friend request';
+      title = 'There is a pending friend request';
     } else if (!isFriend) {
       title = 'Send friend request';
     } else if (isFriend) {

jam-ui/src/layouts/JKLayout.js

@@ -14,7 +14,7 @@ const Layout = () => {
         <Route path="/errors" component={ErrorLayout} />
         <Route component={DashboardLayout} />
       </Switch>
-      <ToastContainer transition={Fade} closeButton={<CloseButton />} position={toast.POSITION.BOTTOM_LEFT} />
+      <ToastContainer transition={Fade} closeButton={<CloseButton />} position={toast.POSITION.BOTTOM_RIGHT} />
     </Router>
   );
 };

jam-ui/test/config/global-setup.ts

@@ -0,0 +1,46 @@
+import { chromium, FullConfig, Page } from '@playwright/test';
+import {user1, user2 } from '../data/users';
+
+async function signup(page: Page, email:string, password:string, first_name:string, Last_name:string){
+  await page.goto('http://www.jamkazam.local:3000/sigup');
+  await page.fill('input#jam_ruby_user_first_name', first_name);  
+  await page.fill('input#jam_ruby_user_last_name', Last_name);
+  await page.fill('input#jam_ruby_user_email', email);
+  await page.fill('input#jam_ruby_user_password', password);
+  await page.fill('input#jam_ruby_user_password_confirmation', password);
+  await page.locator('input#jam_ruby_user_terms_of_service').check();
+  await page.click('input[type="submit"]');
+}
+
+async function login(page: Page, email: string, password: string){
+  await page.goto('http://www.jamkazam.local:3000/signin');   
+  await page.fill('input#session_email', email);  
+  await page.fill('input#session_password', password);  
+  await page.click('input[type="submit"]');
+}
+
+async function globalSetup(config: FullConfig) {
+  const browser = await chromium.launch();
+
+  const page1 = await browser.newPage();
+  //signup user1
+  await signup(page1, user1.email, user1.password, user1.first_name, user1.last_name) 
+  // ... log in user1
+  await login(page1, user1.email, user1.password) 
+  await page1.context().storageState({ path: 'test/storageState/user1.json' });
+
+  const page2 = await browser.newPage();
+  //signup user2
+  await signup(page2, user2.email, user2.password, user2.first_name, user2.last_name) 
+  // ... log in
+  await login(page2, user2.email, user2.password)   
+  await page2.context().storageState({ path: 'test/storageState/user2.json' }); 
+  
+  await browser.close();
+}
+
+async function globalTeardown(){
+  //TODO: delete created users
+}
+
+export default globalSetup;

jam-ui/test/data/users.js

@@ -0,0 +1,18 @@
+
+  const user1 = {
+    id: '27bd4a30-d1b8-4eea-8454-01a104d59381',
+    email: 'nuwan@jamkazam.com',
+    password: 'jam123',
+    first_name: 'Nuwan',
+    last_name: 'Chathuranga'
+  }
+
+  const user2 = {
+    id: 'a09f9a7e-afb7-489d-870d-e13a336e0b97',
+    email: 'nuwan+6@jamkazam.com',
+    password: 'jam123',
+    first_name: 'Seth',
+    last_name: 'Call'
+  }
+
+  module.exports = { user1, user2 }

jam-ui/test/friends.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+
+
+test.describe.serial('Friends page', () => {
+  test.describe.only('as User1', () => {
+    test.use({ storageState: 'test/storageState/user1.json' });
+    
+    test.beforeAll(() => {
+
+    })
+
+    test('Homepage', async ({ page }) => {  
+      await page.goto('/')
+      await expect(page.locator('h1').first()).toHaveText('Dashboard - Home')
+      await expect(page.locator('data-testid=navbarTopProfileDropdown')).toContainText('Nuwan Chaturanga')
+    });
+    
+    test('Friends page', async({ page }) => {
+      await page.goto('/friends')
+      await expect(page.locator('h5').first()).toHaveText('Find New Friends')
+    })
+
+    test.describe('Send friend request', () => {
+      test.beforeAll( async () => {
+                
+      })
+
+      test.only('Connect', async ({page, browser}) => {
+        await page.goto('/friends')
+        await expect(page.locator('data-testid=peopleListTable')).toContainText('Seth Call')
+        await page.locator('data-testid=peopleListTable').locator('text=Seth Call').click()
+        //await page.locator('data-testid=profileSidePanel').locator('data-testid=connect').click()
+        //await expect(page.locator('#flash')).toHaveText('Your friend request was sent successfully')
+      })
+
+    })
+    
+  })
+  
+  test.describe('as User2', () => {
+    test.use({ storageState: 'test/storageState/user2.json' });
+  
+    test('Homepage', async ({ page }) => {  
+      await page.goto('/')
+      await expect(page.locator('h1').first()).toHaveText('Dashboard - Home')
+      await expect(page.locator('data-testid=navbarTopProfileDropdown')).toContainText('Seth Call')
+    });
+  
+    test('Friends page', async({ page }) => {
+      await page.goto('/friends')
+      await expect(page.locator('h5').first()).toHaveText('Find New Friends')
+    })
+  
+  })
+})
+

jam-ui/test/playwright.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test';
+test('basic test', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+  const title = page.locator('.navbar__inner .navbar__title');
+  await expect(title).toHaveText('Playwright');
+});

jam-ui/test/storageState/user1.json

@@ -0,0 +1,95 @@
+{
+  "cookies": [
+    {
+      "sameSite": "Lax",
+      "name": "user_uuid",
+      "value": "2aa6e680-3390-4391-aa0f-121d677b460e",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 2265439128,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "browser.timezone",
+      "value": "Asia%2FKolkata",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1665823128,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "origin",
+      "value": "%7B%22utm_source%22%3A%22organic%22%2C%22utm_medium%22%3A%22organic%22%2C%22utm_campaign%22%3A%22www.jamkazam.local%22%2C%22referrer%22%3A%22http%3A%2F%2Fwww.jamkazam.local%3A3000%2Fsignin%22%7D",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 2265439128,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_ga",
+      "value": "GA1.1.921981718.1634287129",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1697359128,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_gid",
+      "value": "GA1.1.1844330619.1634287129",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1634373528,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_gat",
+      "value": "1",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1634287188,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "remember_token",
+      "value": "mS_Jut9bnHfkBILdVNB61g",
+      "domain": ".jamkazam.local",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "jamkazam_user",
+      "value": "true",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 2265439129,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_jamkazam_session",
+      "value": "WjREdTRjZ0p6WThhWkdnZTdXck5FY214cEJHaGJVS1NWNWszWnJSdFlGbGU4cGVLdXlnYzJYUkE5ekRGU1pjSUZMbEFicDN3YUF1elh2aG1ZMzdjNjVxa0xGMWR1cWs1ZUxRMHZHa3ltck5jeWlIb2dYcmpab2xJRmlJSXpBbGh4cGhQRS9uSTl1TytIQkVDZHRkeWFBPT0tLXBhb3puWUw1OFpYbStuZndCd0JZZ1E9PQ%3D%3D--28550b6657bd3382114910180ac98c3c331beaa6",
+      "domain": ".jamkazam.local",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false
+    }
+  ],
+  "origins": []
+}

jam-ui/test/storageState/user2.json

@@ -0,0 +1,95 @@
+{
+  "cookies": [
+    {
+      "sameSite": "Lax",
+      "name": "user_uuid",
+      "value": "21327889-f0f8-4914-a6ca-05210cf2cc97",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 2265439130,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "browser.timezone",
+      "value": "Asia%2FKolkata",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1665823130,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "origin",
+      "value": "%7B%22utm_source%22%3A%22organic%22%2C%22utm_medium%22%3A%22organic%22%2C%22utm_campaign%22%3A%22www.jamkazam.local%22%2C%22referrer%22%3A%22http%3A%2F%2Fwww.jamkazam.local%3A3000%2Fsignin%22%7D",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 2265439130,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_ga",
+      "value": "GA1.1.269565883.1634287131",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1697359130,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_gid",
+      "value": "GA1.1.175739767.1634287131",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1634373530,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_gat",
+      "value": "1",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 1634287190,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "remember_token",
+      "value": "OHsenGlOljf6-5O6mcXndQ",
+      "domain": ".jamkazam.local",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "jamkazam_user",
+      "value": "true",
+      "domain": "www.jamkazam.local",
+      "path": "/",
+      "expires": 2265439131,
+      "httpOnly": false,
+      "secure": false
+    },
+    {
+      "sameSite": "Lax",
+      "name": "_jamkazam_session",
+      "value": "eDVHVDRBTld5SGNhaFVMNEwxY3VrVVRBeStEZkNvdzJuL0x1cDhBZ3RLUHVNbytpTUFBM1k2M1Y3bEJTQXhKa0ZoRjNYWFhYbUNLTjRydUVhSUVBV2c5ZWNVeW9UYmlDYWNyYm5QQzFxT2g3emZ0Y1lkNk0zblVwMTd3a28rSnB1N1IwRmJsZTlGOFNSVlVWRDFxcFBRPT0tLXphU3NuRVNtNWxWM2VyendJcXNIMHc9PQ%3D%3D--eab86e92ca589397643b3e5d9bf3b219b6b36b3f",
+      "domain": ".jamkazam.local",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false
+    }
+  ],
+  "origins": []
+}