test(js-client-sdk): adding hello app test (#1158)

**Requirements**

- [x] I have added test coverage for new or changed functionality
- [x] I have followed the repository's [pull request submission
guidelines](../blob/main/CONTRIBUTING.md#submitting-pull-requests)
- [x] I have validated my changes against all supported platform
versions

**Related issues**

sdk-1910

**Describe the solution you've provided**

added the test

**Additional context**

I deviated a bit from the specs and read the flag value from the UI. I
think we should update the specs to include this as a way to verify.

<!-- devin-review-badge-begin -->

---

<a href="https://app.devin.ai/review/launchdarkly/js-core/pull/1158"
target="_blank">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Adds new Playwright-based e2e execution to CI (including a new nightly
workflow) and changes example env var expectations, which could cause CI
failures or scheduled runs to break if secrets/roles or placeholders
don’t match.
> 
> **Overview**
> Adds a Playwright e2e smoke test for `@launchdarkly/browser-example`
(with new `playwright.config.ts`, `e2e/verify.spec.ts`, and `yarn test`
script/deps) that verifies the page reports the flag evaluates to
`true`.
> 
> Updates the example’s configuration to use
`LAUNCHDARKLY_CLIENT_SIDE_ID`/`LAUNCHDARKLY_FLAG_KEY` in
`.env.template`, README, and `tsdown.config.ts` placeholder replacement.
> 
> Extends GitHub Actions to run the browser example test as part of
`browser.yml` and introduces a new scheduled `browser-nightly.yaml`
workflow that runs the same example job daily (including installing
Chromium via Playwright).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
f21bfcb. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: joker23

.github/workflows/browser-nightly.yaml

@@ -0,0 +1,21 @@
+name: sdk/browser nightly
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  run-example:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        with:
+          node-version: 22
+      - uses: ./actions/run-example
+        with:
+          workspace_name: '@launchdarkly/browser-example'
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          before_test: 'yarn workspace @launchdarkly/browser-example playwright install --with-deps chromium'

.github/workflows/browser.yml

@@ -131,3 +131,18 @@ jobs:
           pkill -f "playwright" || true
           pkill -f "http-server" || true
           pkill -f "browser-contract-test-adapter" || true
+
+  run-example:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        with:
+          node-version: 22
+      - uses: ./actions/run-example
+        with:
+          workspace_name: '@launchdarkly/browser-example'
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          before_test: 'yarn workspace @launchdarkly/browser-example playwright install --with-deps chromium'

packages/sdk/browser/example/.env.template

@@ -1,5 +1,5 @@
-# Set LD_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
-LD_CLIENT_SIDE_ID=
+# Set LAUNCHDARKLY_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
+LAUNCHDARKLY_CLIENT_SIDE_ID=
 
-# Set LD_FLAG_KEY to the feature flag key you want to evaluate
-LD_FLAG_KEY=
+# Set LAUNCHDARKLY_FLAG_KEY to the feature flag key you want to evaluate
+LAUNCHDARKLY_FLAG_KEY=

packages/sdk/browser/example/README.md

@@ -18,11 +18,11 @@ Nodejs 20.6.0 or later
 
 2. Set the variables in `.env` to your specific LD values
     ```
-    # Set LD_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
-    LD_CLIENT_SIDE_ID=
+    # Set LAUNCHDARKLY_CLIENT_SIDE_ID to your LaunchDarkly client-side ID
+    LAUNCHDARKLY_CLIENT_SIDE_ID=
 
-    # Set LD_FLAG_KEY to the feature flag key you want to evaluate
-    LD_FLAG_KEY=
+    # Set LAUNCHDARKLY_FLAG_KEY to the feature flag key you want to evaluate
+    LAUNCHDARKLY_FLAG_KEY=
     ```
     > [!NOTE]
     > Setting these values is equivilent to modifying the `clientSideID` and `flagKey`

packages/sdk/browser/example/e2e/verify.spec.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { expect, test as it } from '@playwright/test';
+
+it('evaluates the feature flag to true', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('body')).toContainText('feature flag evaluates to true', {
+    timeout: 20_000,
+  });
+});

packages/sdk/browser/example/package.json

@@ -14,12 +14,15 @@
   "scripts": {
     "start": "open index.html",
     "clean": "rm -rf dist dist-static",
-    "build": "npm run clean && tsdown"
+    "build": "npm run clean && tsdown",
+    "test": "playwright test"
   },
   "dependencies": {
     "@launchdarkly/js-client-sdk": "workspace:^"
   },
   "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "playwright": "^1.49.1",
     "tsdown": "^0.17.0-beta.4",
     "typescript": "^5.9.3"
   }

packages/sdk/browser/example/playwright.config.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  reporter: [['list']],
+  use: {
+    baseURL: 'http://localhost:4173',
+  },
+  webServer: {
+    command: 'npx http-server . -p 4173 --silent',
+    url: 'http://localhost:4173',
+    reuseExistingServer: !process.env.CI,
+  },
+});

packages/sdk/browser/example/tsdown.config.ts

@@ -10,7 +10,7 @@ if (fs.existsSync('.env')) {
 
 const ENTRY_FILE = path.join('src', 'app.ts');
 const OUTPUT_FILE = path.join('dist', 'app.js');
-const { LD_CLIENT_SIDE_ID, LD_FLAG_KEY } = process.env;
+const { LAUNCHDARKLY_CLIENT_SIDE_ID, LAUNCHDARKLY_FLAG_KEY } = process.env;
 
 const CLIENT_SIDE_ID_PLACEHOLDER = 'LD_CLIENT_SIDE_ID';
 const FLAG_KEY_PLACEHOLDER = 'LD_FLAG_KEY';
@@ -22,14 +22,14 @@ export default defineConfig({
   noExternal: ['@launchdarkly/js-client-sdk'],
   hooks(hooks) {
     hooks.hook('build:done', () => {
-      if (LD_CLIENT_SIDE_ID) {
+      if (LAUNCHDARKLY_CLIENT_SIDE_ID) {
         const content = fs.readFileSync(OUTPUT_FILE).toString();
         fs.writeFileSync(
           OUTPUT_FILE,
-          content.replaceAll(CLIENT_SIDE_ID_PLACEHOLDER, LD_CLIENT_SIDE_ID),
+          content.replaceAll(CLIENT_SIDE_ID_PLACEHOLDER, LAUNCHDARKLY_CLIENT_SIDE_ID),
         );
       }
-      const flagKey = LD_FLAG_KEY || 'sample-feature';
+      const flagKey = LAUNCHDARKLY_FLAG_KEY || 'sample-feature';
       const content = fs.readFileSync(OUTPUT_FILE).toString();
       fs.writeFileSync(OUTPUT_FILE, content.replaceAll(FLAG_KEY_PLACEHOLDER, flagKey));
     });