1+ import { test , expect } from '@playwright/test' ;
2+
3+ test . describe ( 'About Page' , ( ) => {
4+ test ( 'should display about page content and team members' , async ( { page } ) => {
5+ // Navigate to about page
6+ await page . goto ( '/about' ) ;
7+
8+ // Check page heading
9+ const heading = page . locator ( 'h1:has-text("About This Demo")' ) ;
10+ await expect ( heading ) . toBeVisible ( ) ;
11+
12+ // Check team member cards
13+ const teamCards = page . locator ( '.card' ) ;
14+ await expect ( teamCards ) . toHaveCount ( 3 ) ;
15+
16+ // Verify each team member
17+ const expectedMembers = [ 'React Router' , 'Tailwind CSS' , 'TypeScript' ] ;
18+ for ( let i = 0 ; i < expectedMembers . length ; i ++ ) {
19+ const memberName = expectedMembers [ i ] ;
20+ await expect ( teamCards . nth ( i ) . locator ( 'h2' ) ) . toContainText ( memberName ) ;
21+ }
22+
23+ // Check that back to home link works
24+ const backLink = page . locator ( 'a:has-text("← Back to Home")' ) ;
25+ await expect ( backLink ) . toBeVisible ( ) ;
26+ await backLink . click ( ) ;
27+
28+ // Verify navigation back to home page
29+ await expect ( page ) . toHaveURL ( / \/ $ / ) ;
30+ await expect ( page . locator ( 'h1:has-text("Welcome to React Router")' ) ) . toBeVisible ( ) ;
31+ } ) ;
32+
33+ test ( 'should have working external links' , async ( { page } ) => {
34+ // Navigate to about page
35+ await page . goto ( '/about' ) ;
36+
37+ // Get all external links
38+ const externalLinks = page . locator ( '.card a[target="_blank"]' ) ;
39+
40+ // Verify each link has correct attributes
41+ for ( const link of await externalLinks . all ( ) ) {
42+ await expect ( link ) . toHaveAttribute ( 'rel' , 'noopener noreferrer' ) ;
43+ await expect ( link ) . toHaveText ( 'Learn more →' ) ;
44+ }
45+ } ) ;
46+ } ) ;
0 commit comments