Skip to content

Commit 614679a

Browse files
GorlemZGorlemZ
committed
browserstack-integration-template overflow example
1 parent e220a50 commit 614679a

19 files changed

+4844
-8
lines changed

‎.github/workflows/deploy-and-test.yml‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: 'pages'
16+
cancel-in-progress: true
17+
18+
jobs:
19+
build:
20+
runs-on: ubuntu-latest
21+
steps:
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
25+
- name: Setup pnpm
26+
uses: pnpm/action-setup@v3
27+
with:
28+
version: 10.8.0
29+
30+
- name: Setup Node
31+
uses: actions/setup-node@v4
32+
with:
33+
node-version: '20'
34+
cache: 'pnpm'
35+
36+
- name: Install dependencies
37+
run: pnpm install
38+
39+
- name: Build and Static Export
40+
run: pnpm export
41+
42+
- name: Create .nojekyll file
43+
run: touch out/.nojekyll
44+
45+
- name: List output directory (for debugging)
46+
run: ls -la out/
47+
48+
- name: Setup Pages
49+
uses: actions/configure-pages@v4
50+
with:
51+
static_site_generator: next
52+
53+
- name: Upload artifact
54+
uses: actions/upload-pages-artifact@v3
55+
with:
56+
path: ./out
57+
58+
deploy:
59+
environment:
60+
name: github-pages
61+
url: ${{ steps.deployment.outputs.page_url }}
62+
runs-on: ubuntu-latest
63+
needs: build
64+
steps:
65+
- name: Deploy to GitHub Pages
66+
id: deployment
67+
uses: actions/deploy-pages@v4
68+
69+
browserstack-test:
70+
name: 'Run BrowserStack Playwright Tests'
71+
runs-on: ubuntu-latest
72+
needs: build
73+
steps:
74+
- name: Checkout
75+
uses: actions/checkout@v4
76+
77+
- name: Setup pnpm
78+
uses: pnpm/action-setup@v3
79+
with:
80+
version: 10.8.0
81+
82+
- name: Setup Node
83+
uses: actions/setup-node@v4
84+
with:
85+
node-version: '20'
86+
cache: 'pnpm'
87+
88+
- name: Install dependencies
89+
run: pnpm install
90+
91+
- name: Install Playwright browsers
92+
run: pnpm exec playwright install --with-deps
93+
94+
- name: 'BrowserStack Env Setup'
95+
uses: 'browserstack/github-actions/setup-env@master'
96+
with:
97+
username: ${{ secrets.BROWSERSTACK_USERNAME }}
98+
access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
99+
build-name: Browserstack Demo
100+
project-name: browserstack-integration-template
101+
102+
- name: Run Playwright tests on BrowserStack
103+
run: pnpm test:browserstack

‎.gitignore‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,52 @@
1-
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2-
31
# dependencies
42
/node_modules
53
/.pnp
64
.pnp.js
5+
.pnpm-store/
76

87
# testing
98
/coverage
9+
/test-results/
10+
/playwright-report/
11+
/playwright/.cache/
12+
.obs*
13+
*report*
14+
events.json
1015

1116
# next.js
1217
/.next/
13-
/out/
18+
1419

1520
# production
1621
/build
1722

1823
# misc
24+
/.vscode
1925
.DS_Store
2026
*.pem
2127

2228
# debug
2329
npm-debug.log*
2430
yarn-debug.log*
2531
yarn-error.log*
32+
.pnpm-debug.log*
33+
usage.log*
2634

2735
# local env files
2836
.env*.local
29-
.env
30-
31-
# vercel
32-
.vercel
37+
.env*
3338

3439
# typescript
3540
*.tsbuildinfo
3641
next-env.d.ts
42+
43+
# IDE
44+
.vscode/*
45+
!.vscode/extensions.json
46+
!.vscode/settings.json
47+
48+
# BrowserStack
49+
browserstack.err
50+
browserstack.out
51+
bstack*
52+
*.log

‎README.md‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,44 @@
11
# browserstack-integration-template
2-
A minimal Nexjs app, with playwright testing and browserstack working integration
2+
3+
## Versions
4+
5+
- **Next.js**: 15.3.4
6+
- **Playwright**: 1.53.0
7+
- **BrowserStack SDK**: 1.42.7
8+
9+
## Install & Serve Locally
10+
11+
1. **Install dependencies** (using [pnpm](https://pnpm.io/)):
12+
13+
```sh
14+
pnpm install
15+
```
16+
17+
2. **Start development server**:
18+
19+
```sh
20+
pnpm dev
21+
```
22+
23+
App will be available at [http://localhost:3000](http://localhost:3000)
24+
25+
3. **Build for production**:
26+
```sh
27+
pnpm build
28+
pnpm start
29+
```
30+
31+
## GitHub Actions
32+
33+
This project uses GitHub Actions for:
34+
35+
- **Deploying to GitHub Pages** on every push to `main`:
36+
37+
- Installs dependencies and builds static export (`pnpm export`)
38+
- Uploads the output to GitHub Pages
39+
40+
- **Running Playwright tests on BrowserStack**:
41+
- Installs Playwright browsers and sets up BrowserStack environment
42+
- Runs Playwright tests via BrowserStack SDK (`pnpm test:browserstack`)
43+
44+
See `.github/workflows/deploy-and-test.yml` for details.

‎app/globals.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
5+
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
6+
"Segoe UI Symbol";
7+
line-height: 1.5;
8+
}
9+
10+
h1,
11+
h2,
12+
h3 {
13+
margin: 0;
14+
}
15+
16+
a {
17+
color: inherit;
18+
text-decoration: none;
19+
}
20+
21+
.container {
22+
max-width: 1200px;
23+
margin: 0 auto;
24+
padding: 0 1rem;
25+
}
26+
27+
.header {
28+
padding: 1.5rem 0;
29+
border-bottom: 1px solid #eaeaea;
30+
}
31+
32+
.main {
33+
flex: 1;
34+
padding: 2rem 0;
35+
}
36+
37+
.footer {
38+
padding: 1.5rem 0;
39+
border-top: 1px solid #eaeaea;
40+
text-align: center;
41+
}

‎app/home.module.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.container {
2+
padding: 2rem 0;
3+
}
4+
5+
.main {
6+
max-width: 800px;
7+
margin: 0 auto;
8+
padding: 0 1rem;
9+
}
10+
11+
.title {
12+
font-size: 2.5rem;
13+
margin-bottom: 1rem;
14+
}
15+
16+
.description {
17+
font-size: 1.25rem;
18+
line-height: 1.5;
19+
color: #333;
20+
margin-bottom: 2rem;
21+
}
22+
23+
.button {
24+
display: inline-block;
25+
padding: 0.5rem 1.5rem;
26+
background-color: #0070f3;
27+
color: #fff;
28+
border: none;
29+
border-radius: 4px;
30+
text-align: center;
31+
text-decoration: none;
32+
font-size: 1rem;
33+
font-weight: 500;
34+
cursor: pointer;
35+
transition: background 0.2s;
36+
}
37+
38+
.button:hover {
39+
background-color: #005bb5;
40+
}

‎app/layout.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import "./globals.css"
2+
import { ReactNode } from "react"
3+
4+
export const metadata = {
5+
title: 'Buildo Template App',
6+
description: 'Minimal Next.js example',
7+
}
8+
9+
export default function Layout({ children }: { children: ReactNode }) {
10+
return (
11+
<html lang="en">
12+
<body>
13+
<div className="container">
14+
<header className="header">
15+
<h1>Buildo Next.js App</h1>
16+
</header>
17+
<main className="main">{children}</main>
18+
<footer className="footer">
19+
<p>© 2025 Buildo Next.js App</p>
20+
</footer>
21+
</div>
22+
</body>
23+
</html>)
24+
}

‎app/page.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styles from "./home.module.css"
2+
import Link from 'next/link'
3+
4+
export default function Home() {
5+
return (
6+
<div className={styles.container}>
7+
<h1 className={styles.title}>Homepage</h1>
8+
<p className={styles.description}>Simple homepage description</p>
9+
<Link href="/users" className={styles.button}>
10+
<span>Go to Users</span>
11+
</Link>
12+
</div>
13+
)
14+
}

‎app/users/page.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styles from "./users.module.css"
2+
3+
export default function UsersPage() {
4+
const users = [
5+
{ id: 1, name: "John Doe", email: "[email protected]" },
6+
{ id: 2, name: "Jane Smith", email: "[email protected]" },
7+
{ id: 3, name: "Bob Johnson", email: "[email protected]" },
8+
{ id: 4, name: "Giorgio Puzzini", email: "[email protected]" },
9+
];
10+
return (
11+
<div className={styles.container} data-testid="overflow-container">
12+
<h1>Users</h1>
13+
<div className={styles.debugInfo}>
14+
<p>
15+
Below 500px viewport, this content will <strong>overflow</strong>.
16+
</p>
17+
</div>
18+
19+
<div className={styles.userList}>
20+
{users.map((user) => (
21+
<div
22+
key={user.id}
23+
className={styles.userItem}
24+
data-testid={`user-${user.id}`}
25+
>
26+
<h2>{user.name}</h2>
27+
<p>{user.email}</p>
28+
</div>
29+
))}
30+
</div>
31+
</div>
32+
)
33+
}

0 commit comments

Comments
 (0)