Skip to content

Commit 7ad0886

Browse files
ScriptedAlchemyScriptedAlchemy
committed
docs(css-isolation): update e2e guidance
1 parent 9417a97 commit 7ad0886

File tree

7 files changed

+117
-62803
lines changed

7 files changed

+117
-62803
lines changed

‎css-isolation/README.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ By default the Webpack style-loader will inject CSS in `<style>` tags into the `
2929

3030
**An additional wrapping `<body>` tag is always intentionally inserted into each Shadow DOM container. This makes it possible to use global reboot CSS rules inside the remote app which usually target the `<body>` tag and its contents. This should enable the user, for example, to have two different versions of Bootstrap one in the host and one in the remote.**
3131

32-
**Testing such a setup with tools like Cypress is possible with some additional settings and tweaks. Make sure to consult with the testing tool's documentation.**
32+
**Testing such a setup with tools like Playwright is possible with some additional settings and tweaks. Make sure to consult with the testing tool's documentation for handling Shadow DOM interactions.**
3333

3434
# Running Demo
3535

@@ -40,10 +40,13 @@ Run `pnpm run start`. This will build and serve both `app1` and `app2` on ports
4040

4141
<img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589682154&cid=ae045149-9d17-0367-bbb0-11c41d92b411&dt=ModuleFederationExamples&dp=/email/BasicRemoteHost">
4242

43-
# Running Cypress E2E Tests
43+
# Running Playwright E2E Tests
4444

45-
To run tests in interactive mode, run `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress-e2e/README.md#how-to-run-tests)
45+
Run `pnpm test:e2e` from this workspace to execute the Playwright end-to-end suite against the development servers configured in [`playwright.config.ts`](./playwright.config.ts).
4646

47-
To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
47+
For local debugging you can use the helper scripts:
4848

49-
["Best Practices, Rules amd more interesting information here](../../cypress-e2e/README.md)
49+
- `pnpm test:e2e:ui` to explore the tests in Playwright UI mode.
50+
- `pnpm test:e2e:debug` to launch the suite with Playwright's debug tools enabled.
51+
52+
In CI environments run `pnpm e2e:ci` to install the required browsers and execute the tests in headless mode. Use `pnpm legacy:e2e:ci` (or set `LEGACY_START=true`) to run the same checks against the legacy Webpack builds.

‎css-isolation/cypress.env.json‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎css-isolation/e2e/checkApplications.cy.ts‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

‎css-isolation/e2e/checkApplications.spec.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
const apps = [
4+
{
5+
name: 'App 1',
6+
header: 'Host Application - React Version',
7+
url: 'http://localhost:3001',
8+
},
9+
{
10+
name: 'App 2',
11+
header: 'Remote Application - React Version',
12+
url: 'http://localhost:3002',
13+
},
14+
];
15+
16+
test.describe('CSS isolation example', () => {
17+
for (const { name, header, url } of apps) {
18+
test(`${name} renders expected headings`, async ({ page }) => {
19+
await page.goto(url);
20+
21+
const heading = page.getByRole('heading', { level: 1, name: new RegExp(header) });
22+
await expect(heading).toBeVisible();
23+
await expect(page.getByRole('heading', { level: 2, name })).toHaveText(name);
24+
});
25+
}
26+
27+
test('host renders remote button inside shadow DOM', async ({ page }) => {
28+
await page.goto('http://localhost:3001');
29+
30+
const buttonTextHandle = await page.waitForFunction(() => {
31+
const host = document.querySelector('#parent');
32+
33+
return host?.shadowRoot?.querySelector('button')?.textContent?.trim() ?? null;
34+
});
35+
36+
expect(await buttonTextHandle.jsonValue()).toBe('Make Everything Yellow');
37+
});
38+
39+
test.describe('standalone remote', () => {
40+
test('button applies yellow styles after click', async ({ page }) => {
41+
await page.goto('http://localhost:3002');
42+
43+
const button = page.getByRole('button', { name: 'Make Everything Yellow' });
44+
await expect(button).toBeVisible();
45+
46+
await button.click();
47+
48+
await expect(button).toHaveCSS('background-color', 'rgb(255, 255, 0)');
49+
});
50+
});
51+
});

‎css-isolation/package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@
1010
"legacy:build": "pnpm --filter css-isolation_app* --parallel legacy:build",
1111
"serve": "pnpm --filter css-isolation_app* --parallel serve",
1212
"clean": "pnpm --filter css-isolation_app* --parallel clean",
13-
"e2e:ci": "pnpm start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
14-
"legacy:e2e:ci": "pnpm legacy:start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
13+
"test:e2e": "pnpm exec playwright test",
14+
"test:e2e:ui": "pnpm exec playwright test --ui",
15+
"test:e2e:debug": "pnpm exec playwright test --debug",
16+
"e2e:ci": "pnpm exec playwright install --with-deps && pnpm exec playwright test --reporter=list",
17+
"legacy:e2e:ci": "LEGACY_START=true pnpm exec playwright install --with-deps && LEGACY_START=true pnpm exec playwright test --reporter=list"
1518
},
1619
"devDependencies": {
17-
"wait-on": "7.2.0"
20+
"@playwright/test": "^1.54.2",
21+
"playwright": "^1.54.2"
1822
}
1923
}

‎css-isolation/playwright.config.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
const useLegacyStart = !!process.env.LEGACY_START;
4+
const startCommand = useLegacyStart ? 'pnpm legacy:start' : 'pnpm start';
5+
6+
export default defineConfig({
7+
testDir: './e2e',
8+
timeout: 60_000,
9+
expect: {
10+
timeout: 15_000,
11+
},
12+
fullyParallel: true,
13+
forbidOnly: !!process.env.CI,
14+
retries: process.env.CI ? 1 : 0,
15+
workers: process.env.CI ? 1 : undefined,
16+
reporter: [
17+
['html', { outputFolder: 'playwright-report', open: 'never' }],
18+
['list'],
19+
],
20+
use: {
21+
baseURL: 'http://localhost:3001',
22+
trace: 'on-first-retry',
23+
screenshot: 'only-on-failure',
24+
video: 'retain-on-failure',
25+
viewport: { width: 1920, height: 1080 },
26+
},
27+
28+
projects: [
29+
{
30+
name: 'chromium',
31+
use: { ...devices['Desktop Chrome'] },
32+
},
33+
],
34+
35+
webServer: [
36+
{
37+
command: startCommand,
38+
cwd: 'app2',
39+
port: 3002,
40+
reuseExistingServer: !process.env.CI,
41+
timeout: 120_000,
42+
},
43+
{
44+
command: startCommand,
45+
cwd: 'app1',
46+
port: 3001,
47+
reuseExistingServer: !process.env.CI,
48+
timeout: 120_000,
49+
},
50+
],
51+
});

0 commit comments

Comments
 (0)