Skip to content

Commit 97ab94a

Browse files
jochen-testingbotjochen-testingbot
committed
Initial commit with Puppeteer examples for TestingBot
- Added examples for Chrome, Firefox, and Edge browsers - Added Jest integration example - Added WebdriverIO example - Created GitHub Actions workflow - Added comprehensive README with TestingBot options documentation
0 parents  commit 97ab94a

File tree

12 files changed

+9685
-0
lines changed

12 files changed

+9685
-0
lines changed

‎.github/workflows/test.yml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
name: TestingBot Puppeteer Tests
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
pull_request:
7+
branches: [ main ]
8+
9+
jobs:
10+
test:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- uses: actions/checkout@v3
15+
16+
- name: Setup Node.js
17+
uses: actions/setup-node@v3
18+
with:
19+
node-version: '18'
20+
cache: 'npm'
21+
22+
- name: Install dependencies
23+
run: npm ci
24+
25+
- name: Run Puppeteer Chrome Test on TestingBot
26+
env:
27+
TB_KEY: ${{ secrets.TB_KEY }}
28+
TB_SECRET: ${{ secrets.TB_SECRET }}
29+
run: npm run test:puppeteer:chrome

‎.gitignore‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Dependency directories
2+
node_modules/
3+
4+
# Environment config
5+
.env
6+
7+
# Logs
8+
logs
9+
*.log
10+
npm-debug.log*
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Screenshots
19+
*.png
20+
21+
# Coverage directory
22+
coverage/
23+
24+
# OS specific files
25+
.DS_Store
26+
Thumbs.db
27+
28+
# IDE folders
29+
.idea/
30+
.vscode/
31+
*.swp
32+
*.swo

‎README.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Puppeteer TestingBot Example
2+
3+
This repository contains examples of how to run [Puppeteer](https://pptr.dev/) tests on [TestingBot](https://testingbot.com)'s real browser cloud. With TestingBot, you can test your web applications on real browsers with different versions and operating systems.
4+
5+
## Prerequisites
6+
7+
- Node.js (v14 or newer)
8+
- TestingBot account with API credentials (Key and Secret)
9+
10+
## Setup
11+
12+
1. Clone this repository:
13+
```bash
14+
git clone https://github.com/yourusername/puppeteer-testingbot-example.git
15+
cd puppeteer-testingbot-example
16+
```
17+
18+
2. Install dependencies:
19+
```bash
20+
npm install
21+
```
22+
23+
3. Set your TestingBot credentials:
24+
```bash
25+
export TB_KEY="your-testingbot-key"
26+
export TB_SECRET="your-testingbot-secret"
27+
```
28+
29+
## Running the examples
30+
31+
### Puppeteer Examples
32+
33+
Run tests on different browsers:
34+
35+
```bash
36+
# Run on Chrome
37+
npm run test:puppeteer:chrome
38+
39+
# Run on Firefox
40+
npm run test:puppeteer:firefox
41+
42+
# Run on Edge
43+
npm run test:puppeteer:edge
44+
```
45+
46+
### Jest Example
47+
48+
Run tests using Jest:
49+
50+
```bash
51+
npm run test:jest
52+
```
53+
54+
### WebdriverIO Example
55+
56+
Run tests using WebdriverIO:
57+
58+
```bash
59+
npm run test:webdriverio
60+
```
61+
62+
## TestingBot Options
63+
64+
When running tests on TestingBot with Puppeteer, you can use various options to customize your testing environment. These options are passed in the WebSocket URL when connecting to TestingBot.
65+
66+
### Basic Settings
67+
68+
- **browserName**: Choose from Chrome, Edge, Firefox
69+
- **browserVersion**: Specify browser version (e.g., "latest", "*", "<=16")
70+
- **platform**: Select OS like WIN10, WIN11, SONOMA
71+
72+
### Test Configuration
73+
74+
- **screenRecorder**: Enable/disable video recording (default: true)
75+
- **public**: Make test results publicly accessible (default: false)
76+
- **name**: Custom test name
77+
- **build**: Group tests under a build identifier
78+
- **timeout**: Session timeout in seconds (default: 90)
79+
- **maxDuration**: Maximum test duration (default: 1800 seconds)
80+
81+
### Environment Customization
82+
83+
- **timeZone**: Set custom time zone
84+
- **screen-resolution**: Change screen resolution
85+
- **geoCountryCode**: Test from specific country
86+
- **upload**: Upload files to test VM
87+
- **startupFlags**: Customize browser startup flags
88+
89+
### Additional Options
90+
91+
- **blacklist**: Block specific hostnames
92+
- **recordLogs**: Enable/disable logging
93+
- **extra**: Add custom metadata
94+
- **tunnelIdentifier**: Use TestingBot Tunnel
95+
96+
Example usage:
97+
98+
```javascript
99+
const browser = await puppeteer.connect({
100+
browserWSEndpoint: `wss://${TB_KEY}:${TB_SECRET}@cloud.testingbot.com/puppeteer?browserName=chrome&browserVersion=latest&platform=WIN10&name=My%20Test&build=Build123&screenRecorder=true&timeZone=America/New_York&screen-resolution=1920x1080`
101+
});
102+
```
103+
104+
For a complete list of options, visit the [TestingBot Puppeteer Options documentation](https://testingbot.com/support/puppeteer/options.html).
105+
106+
## GitHub Actions Integration
107+
108+
This repository includes a GitHub Actions workflow that runs the Chrome test on TestingBot. To use it, add your TestingBot credentials as GitHub secrets:
109+
110+
1. Go to your GitHub repository settings
111+
2. Navigate to Secrets > Actions
112+
3. Add two secrets:
113+
- `TB_KEY`: Your TestingBot key
114+
- `TB_SECRET`: Your TestingBot secret
115+
116+
## Learn More
117+
118+
- [TestingBot Documentation](https://testingbot.com/support)
119+
- [Puppeteer Documentation](https://pptr.dev/)
120+
- [Jest Documentation](https://jestjs.io/)
121+
- [WebdriverIO Documentation](https://webdriver.io/)

‎examples/jest/puppeteer.test.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const puppeteer = require('puppeteer-core');
2+
3+
const TB_KEY = process.env.TB_KEY || 'Your TestingBot Key';
4+
const TB_SECRET = process.env.TB_SECRET || 'Your TestingBot Secret';
5+
6+
let browser;
7+
let page;
8+
9+
beforeAll(async () => {
10+
browser = await puppeteer.connect({
11+
browserWSEndpoint: `wss://${TB_KEY}:${TB_SECRET}@cloud.testingbot.com/puppeteer?browserName=chrome&browserVersion=latest&platform=WIN10&name=Jest-Puppeteer-Example&screenRecorder=true`
12+
});
13+
page = await browser.newPage();
14+
await page.setViewport({ width: 1366, height: 768 });
15+
});
16+
17+
afterAll(async () => {
18+
await browser.close();
19+
});
20+
21+
test('TestingBot homepage title should be correct', async () => {
22+
await page.goto('https://testingbot.com', { waitUntil: 'networkidle0' });
23+
const title = await page.title();
24+
expect(title).toContain('TestingBot');
25+
}, 30000);
26+
27+
test('TestingBot logo should be visible', async () => {
28+
await page.waitForSelector('.navbar-brand');
29+
const logoText = await page.evaluate(() => {
30+
return document.querySelector('.navbar-brand').innerText;
31+
});
32+
expect(logoText).toContain('TestingBot');
33+
}, 10000);
34+
35+
test('TestingBot features section should exist', async () => {
36+
const featuresExist = await page.evaluate(() => {
37+
return document.querySelectorAll('.features').length > 0;
38+
});
39+
expect(featuresExist).toBe(true);
40+
}, 10000);
41+
42+
test('Take a screenshot', async () => {
43+
await page.screenshot({ path: 'testingbot-jest.png' });
44+
}, 5000);

‎examples/puppeteer/chrome/test.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const puppeteer = require('puppeteer-core');
2+
3+
const TB_KEY = process.env.TB_KEY || 'Your TestingBot Key';
4+
const TB_SECRET = process.env.TB_SECRET || 'Your TestingBot Secret';
5+
6+
(async () => {
7+
console.log('Launching Chrome on TestingBot...');
8+
9+
const browser = await puppeteer.connect({
10+
browserWSEndpoint: `wss://${TB_KEY}:${TB_SECRET}@cloud.testingbot.com/puppeteer?browserName=chrome&browserVersion=latest&platform=WIN10&name=Puppeteer-Chrome-Example&screenRecorder=true`
11+
});
12+
13+
try {
14+
console.log('Browser connected. Starting test...');
15+
const page = await browser.newPage();
16+
17+
await page.setViewport({ width: 1366, height: 768 });
18+
19+
await page.goto('https://testingbot.com', { waitUntil: 'networkidle0' });
20+
console.log(`Page loaded: ${await page.title()}`);
21+
22+
await page.screenshot({ path: 'testingbot-chrome.png' });
23+
console.log('Screenshot taken');
24+
25+
await page.waitForSelector('.navbar-brand');
26+
const logoText = await page.evaluate(() => {
27+
return document.querySelector('.navbar-brand').innerText;
28+
});
29+
30+
console.log(`Found logo text: ${logoText}`);
31+
32+
if (logoText.includes('TestingBot')) {
33+
console.log('Test passed!');
34+
} else {
35+
console.error('Test failed: Logo text not found');
36+
process.exit(1);
37+
}
38+
} catch (err) {
39+
console.error('Test failed with error:', err);
40+
process.exit(1);
41+
} finally {
42+
await browser.close();
43+
console.log('Test completed. Browser closed.');
44+
}
45+
})();

‎examples/puppeteer/edge/test.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const puppeteer = require('puppeteer-core');
2+
3+
const TB_KEY = process.env.TB_KEY || 'Your TestingBot Key';
4+
const TB_SECRET = process.env.TB_SECRET || 'Your TestingBot Secret';
5+
6+
(async () => {
7+
console.log('Launching Edge on TestingBot...');
8+
9+
const browser = await puppeteer.connect({
10+
browserWSEndpoint: `wss://${TB_KEY}:${TB_SECRET}@cloud.testingbot.com/puppeteer?browserName=edge&browserVersion=latest&platform=WIN10&name=Puppeteer-Edge-Example&screenRecorder=true`
11+
});
12+
13+
try {
14+
console.log('Browser connected. Starting test...');
15+
const page = await browser.newPage();
16+
17+
await page.setViewport({ width: 1366, height: 768 });
18+
19+
await page.goto('https://testingbot.com', { waitUntil: 'networkidle0' });
20+
console.log(`Page loaded: ${await page.title()}`);
21+
22+
await page.screenshot({ path: 'testingbot-edge.png' });
23+
console.log('Screenshot taken');
24+
25+
await page.waitForSelector('.navbar-brand');
26+
const logoText = await page.evaluate(() => {
27+
return document.querySelector('.navbar-brand').innerText;
28+
});
29+
30+
console.log(`Found logo text: ${logoText}`);
31+
32+
if (logoText.includes('TestingBot')) {
33+
console.log('Test passed!');
34+
} else {
35+
console.error('Test failed: Logo text not found');
36+
process.exit(1);
37+
}
38+
} catch (err) {
39+
console.error('Test failed with error:', err);
40+
process.exit(1);
41+
} finally {
42+
await browser.close();
43+
console.log('Test completed. Browser closed.');
44+
}
45+
})();

‎examples/puppeteer/firefox/test.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const puppeteer = require('puppeteer-core');
2+
3+
const TB_KEY = process.env.TB_KEY || 'Your TestingBot Key';
4+
const TB_SECRET = process.env.TB_SECRET || 'Your TestingBot Secret';
5+
6+
(async () => {
7+
console.log('Launching Firefox on TestingBot...');
8+
9+
const browser = await puppeteer.connect({
10+
browserWSEndpoint: `wss://${TB_KEY}:${TB_SECRET}@cloud.testingbot.com/puppeteer?browserName=firefox&browserVersion=latest&platform=WIN10&name=Puppeteer-Firefox-Example&screenRecorder=true`
11+
});
12+
13+
try {
14+
console.log('Browser connected. Starting test...');
15+
const page = await browser.newPage();
16+
17+
await page.setViewport({ width: 1366, height: 768 });
18+
19+
await page.goto('https://testingbot.com', { waitUntil: 'networkidle0' });
20+
console.log(`Page loaded: ${await page.title()}`);
21+
22+
await page.screenshot({ path: 'testingbot-firefox.png' });
23+
console.log('Screenshot taken');
24+
25+
await page.waitForSelector('.navbar-brand');
26+
const logoText = await page.evaluate(() => {
27+
return document.querySelector('.navbar-brand').innerText;
28+
});
29+
30+
console.log(`Found logo text: ${logoText}`);
31+
32+
if (logoText.includes('TestingBot')) {
33+
console.log('Test passed!');
34+
} else {
35+
console.error('Test failed: Logo text not found');
36+
process.exit(1);
37+
}
38+
} catch (err) {
39+
console.error('Test failed with error:', err);
40+
process.exit(1);
41+
} finally {
42+
await browser.close();
43+
console.log('Test completed. Browser closed.');
44+
}
45+
})();

‎examples/webdriverio/test.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
describe('TestingBot Website', () => {
2+
it('should have the right title', async () => {
3+
await browser.url('/');
4+
await expect(browser).toHaveTitle(expect.stringContaining('TestingBot'));
5+
});
6+
7+
it('should display the TestingBot logo', async () => {
8+
await $('.navbar-brand').waitForExist();
9+
const logoText = await $('.navbar-brand').getText();
10+
await expect(logoText).toContain('TestingBot');
11+
});
12+
13+
it('should have a features section', async () => {
14+
const featuresSection = await $('.features');
15+
await expect(featuresSection).toExist();
16+
});
17+
18+
it('should take a screenshot', async () => {
19+
await browser.saveScreenshot('testingbot-webdriverio.png');
20+
});
21+
});

0 commit comments

Comments
 (0)