Modernize Puppeteer locator in BrowserStack SDK sample (Node · Puppeteer · Jest)

.gitignore

@@ -1 +1,16 @@
 node_modules
+
+# BrowserStack Node SDK sample
+.env
+local.log
+browserstack-logs/
+log/
+bin/
+obj/
+target/
+__pycache__/
+.venv
+venv
+__pycache__
+*.log
+.pytest_cache

puppeteer-jest-sdk/README.md

@@ -0,0 +1,62 @@
+# Puppeteer (Jest) with BrowserStack
+
+Run your Puppeteer tests with the Jest test runner on the BrowserStack
+infrastructure using the [BrowserStack Node SDK](https://www.browserstack.com/docs/automate/selenium/sdk-overview).
+The SDK intercepts Puppeteer's browser launch and routes each session to the
+BrowserStack cloud — no changes to your test logic are required.
+
+## Prerequisites
+
+- A BrowserStack account ([sign up](https://www.browserstack.com/users/sign_up)).
+- Your BrowserStack `userName` and `accessKey` from your
+  [Account Settings](https://www.browserstack.com/accounts/settings) page.
+- Node.js (>= 14) and npm installed.
+
+## Setup
+
+1. Clone this repository and move into this sample directory:
+
+   ```bash
+   git clone https://github.com/browserstack/puppeteer-browserstack.git
+   cd puppeteer-browserstack/puppeteer-jest-sdk
+   ```
+
+2. Install the dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Provide your BrowserStack credentials. Either set them as environment
+   variables:
+
+   ```bash
+   export BROWSERSTACK_USERNAME="YOUR_USERNAME"
+   export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
+   ```
+
+   or edit `browserstack.yml` and replace `YOUR_USERNAME` and
+   `YOUR_ACCESS_KEY` with your credentials.
+
+## Run Sample Test
+
+```bash
+npx browserstack-node-sdk jest sample.test.js
+```
+
+## Run Local Test
+
+```bash
+npx browserstack-node-sdk jest local.test.js
+```
+
+The local test loads `http://bs-local.com:45454`. `browserstackLocal: true` in
+`browserstack.yml` starts the BrowserStack Local tunnel automatically. Make sure
+a server is serving a page titled `BrowserStack Local` on port `45454` of your
+local machine before running this test.
+
+## Notes
+
+- View your test runs, sessions, logs, and video recordings on the
+  [BrowserStack Automate dashboard](https://automate.browserstack.com/).
+- To run all tests at once: `npx browserstack-node-sdk jest`.

puppeteer-jest-sdk/browserstack.yml

@@ -0,0 +1,26 @@
+userName: YOUR_USERNAME
+accessKey: YOUR_ACCESS_KEY
+projectName: BrowserStack Samples
+buildName: browserstack build
+buildIdentifier: '#${BUILD_NUMBER}'
+framework: jest
+platforms:
+  - os: OS X
+    osVersion: Big Sur
+    browserName: Chrome
+    browserVersion: latest
+  - os: Windows
+    osVersion: 10
+    browserName: Edge
+    browserVersion: latest
+  - deviceName: Samsung Galaxy S22 Ultra
+    browserName: chrome
+    osVersion: 12.0
+parallelsPerPlatform: 1
+browserstackAutomation: true
+browserstackLocal: true
+source: puppeteer-browserstack:sample-sdk:v1.0
+testObservability: true
+debug: false
+networkLogs: false
+consoleLogs: errors

puppeteer-jest-sdk/jest.config.js

@@ -0,0 +1,10 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  rootDir: '.',
+  testTimeout: 120000,
+  testMatch: ['<rootDir>/*.test.js']
+};

puppeteer-jest-sdk/local.test.js

@@ -0,0 +1,24 @@
+const puppeteer = require('puppeteer');
+
+describe('BrowserStack Local', () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    // browserstackLocal: true in browserstack.yml starts the Local tunnel,
+    // so bs-local.com resolves to your local machine inside the session.
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    if (browser) {
+      await browser.close();
+    }
+  });
+
+  it('loads the local page over the BrowserStack Local tunnel', async () => {
+    await page.goto('http://bs-local.com:45454');
+    expect(await page.title()).toBe('BrowserStack Local');
+  });
+});