diff --git a/.github/workflows/tests_primary.yml b/.github/workflows/tests_primary.yml index efd24d1952..ee63c2ede7 100644 --- a/.github/workflows/tests_primary.yml +++ b/.github/workflows/tests_primary.yml @@ -101,21 +101,24 @@ jobs: - run: npx playwright install --with-deps - run: npm run ttest -- esm.spec.ts - test_html_report: - name: HTML Report + test_web_components: + name: Web Components runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 12 - - run: npm i -g npm@8.3 + node-version: 16 - run: npm ci env: DEBUG: pw:install - run: npm run build - run: npx playwright install --with-deps - - run: npm run htest - if: matrix.os != 'ubuntu-latest' - - run: xvfb-run npm run htest - if: matrix.os == 'ubuntu-latest' + - run: npm run test-html-reporter + if: always() && matrix.os != 'ubuntu-latest' + - run: xvfb-run npm run test-html-reporter + if: always() && matrix.os == 'ubuntu-latest' + - run: npm run test-web + if: always() && matrix.os != 'ubuntu-latest' + - run: xvfb-run npm run test-web + if: always() && matrix.os == 'ubuntu-latest' diff --git a/package.json b/package.json index 060e80af74..d3cc422451 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "wtest": "playwright test --config=tests/library/playwright.config.ts --project=webkit", "atest": "playwright test --config=tests/android/playwright.config.ts", "etest": "playwright test --config=tests/electron/playwright.config.ts", - "htest": "playwright test --config=packages/html-reporter", + "test-html-reporter": "playwright test --config=packages/html-reporter", + "test-web": "playwright test --config=packages/web", "ttest": "node ./tests/playwright-test/stable-test-runner/node_modules/@playwright/test/cli test --config=tests/playwright-test/playwright.config.ts", "vtest": "cross-env PLAYWRIGHT_DOCKER=1 node ./tests/playwright-test/stable-test-runner/node_modules/@playwright/test/cli test --config=tests/playwright-test/playwright.config.ts", "ct": "playwright test tests/components/test-all.spec.js --reporter=list", diff --git a/packages/trace-viewer/src/ui/stackTrace.css b/packages/trace-viewer/src/ui/stackTrace.css index 7e1bd990b7..a6c76598ec 100644 --- a/packages/trace-viewer/src/ui/stackTrace.css +++ b/packages/trace-viewer/src/ui/stackTrace.css @@ -24,7 +24,6 @@ .stack-trace-frame { flex: 0 0 20px; - font-size: smaller; display: flex; flex-direction: row; align-items: center; diff --git a/packages/web/index.html b/packages/web/index.html new file mode 100644 index 0000000000..955ae936d9 --- /dev/null +++ b/packages/web/index.html @@ -0,0 +1,29 @@ + + + + + + + + + Tests + + +
+ + + diff --git a/packages/web/playwright.config.ts b/packages/web/playwright.config.ts new file mode 100644 index 0000000000..e2a3cd5c4d --- /dev/null +++ b/packages/web/playwright.config.ts @@ -0,0 +1,46 @@ +/** + * Copyright (c) Microsoft Corporation. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { PlaywrightTestConfig, devices } from '@playwright/test'; + +const config: PlaywrightTestConfig = { + testDir: 'src', + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 0, + reporter: process.env.CI ? [ + ['html', { open: 'never' }], + ] : [ + ['html', { open: 'on-failure' }] + ], + webServer: { + url: 'http://localhost:3102', + command: 'npx vite dev', + cwd: __dirname, + reuseExistingServer: !process.env.CI, + }, + use: { + baseURL: 'http://localhost:3102', + trace: 'on-first-retry', + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + ], +}; + +export default config; diff --git a/packages/web/src/common.css b/packages/web/src/common.css index e2720de4d8..27db81ddc9 100644 --- a/packages/web/src/common.css +++ b/packages/web/src/common.css @@ -44,7 +44,7 @@ --light-pink: #ff69b460; --network-content-bg: #dcdcdb; --box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px; - --monospace-font: "SF Mono", Monaco, Consolas, "Droid Sans Mono", Inconsolata, "Courier New",monospace; + --monospace-font: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; } html, body { diff --git a/packages/web/src/components/expandable.tsx b/packages/web/src/components/expandable.tsx index 8aa3a34069..88d85e23e0 100644 --- a/packages/web/src/components/expandable.tsx +++ b/packages/web/src/components/expandable.tsx @@ -24,13 +24,13 @@ export const Expandable: React.FunctionComponent<{ style?: React.CSSProperties, }> = ({ title, body, setExpanded, expanded, style }) => { return
-
+
setExpanded(!expanded)} /> {title}
- { expanded &&
{body}
} + { expanded &&
{body}
}
; }; diff --git a/packages/web/src/components/index.ts b/packages/web/src/components/index.ts new file mode 100644 index 0000000000..a992912f29 --- /dev/null +++ b/packages/web/src/components/index.ts @@ -0,0 +1,24 @@ +/** + * Copyright (c) Microsoft Corporation. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Source } from './source'; +import '../common.css'; + +import register from '@playwright/experimental-ct-react/register'; + +register({ + Source, +}); diff --git a/packages/web/src/components/source.css b/packages/web/src/components/source.css index ccd74c80c0..038ac56ac5 100644 --- a/packages/web/src/components/source.css +++ b/packages/web/src/components/source.css @@ -21,8 +21,8 @@ white-space: pre; overflow: auto; font-family: var(--monospace-font); - font-size: 11px; - line-height: 16px; + font-size: 12px; + line-height: 20px; background: white; user-select: text; } @@ -35,13 +35,11 @@ .source-line-number { color: #555; padding: 0 8px; - width: 30px; + width: 40px; + margin-right: 3px; text-align: right; background: #f6f5f4; user-select: none; -} - -.source-line-number { flex: none; } diff --git a/packages/web/src/components/source.spec.tsx b/packages/web/src/components/source.spec.tsx new file mode 100644 index 0000000000..7e31ae7642 --- /dev/null +++ b/packages/web/src/components/source.spec.tsx @@ -0,0 +1,101 @@ +/** + * Copyright (c) Microsoft Corporation. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { expect, test } from '@playwright/experimental-ct-react/test'; +import { Source } from './source'; + +test.use({ viewport: { width: 500, height: 500 } }); + +const javascriptSnippet = `import { test, expect } from '@playwright/test'; + +test('basic test', async ({ page }) => { + await page.goto('https://playwright.dev/'); + const title = page.locator('.navbar__inner .navbar__title'); + await expect(title).toHaveText('Playwright'); +}); +`; + +const pythonSnippet = `import asyncio +from playwright.async_api import async_playwright + +async def main(): + async with async_playwright() as p: + # Works across chromium, firefox and webkit + browser = await p.chromium.launch(headless=False) + +asyncio.run(main()) +`; + +const javaSnippet = `import com.microsoft.playwright.*; + +public class Example { + public static void main(String[] args) { + try (Playwright playwright = Playwright.create()) { + BrowserType chromium = playwright.chromium(); + Browser browser = chromium.launch(new BrowserType.LaunchOptions().setHeadless(false)); + } + } +} +`; + +const csharpSnippet = ` +using Microsoft.Playwright; +using System.Threading.Tasks; + +class Program +{ + public static async Task Main() + { + using var playwright = await Playwright.CreateAsync(); + await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions + { + Headless = false + }); + } +} +`; + +test('highlight JavaScript', async ({ mount }) => { + const component = await mount(); + await expect(component.locator('text="async"').first()).toHaveClass('hljs-keyword'); +}); + +test('highlight Python', async ({ mount }) => { + const component = await mount(); + await expect(component.locator('text="async"').first()).toHaveClass('hljs-keyword'); +}); + +test('highlight Java', async ({ mount }) => { + const component = await mount(); + await expect(component.locator('text="public"').first()).toHaveClass('hljs-keyword'); +}); + +test('highlight C#', async ({ mount }) => { + const component = await mount(); + await expect(component.locator('text="public"').first()).toHaveClass('hljs-keyword'); +}); + +test('highlight lines', async ({ mount }) => { + const component = await mount(); + await expect(component.locator('.source-line-running')).toContainText('goto'); + await expect(component.locator('.source-line-paused')).toContainText('title'); + await expect(component.locator('.source-line-error')).toContainText('expect'); +}); diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts new file mode 100644 index 0000000000..6090a51a73 --- /dev/null +++ b/packages/web/vite.config.ts @@ -0,0 +1,26 @@ +/** + * Copyright (c) Microsoft Corporation. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], + server: { + port: 3102, + }, +});