Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

test: start adding component tests (#13159)

Browse source
This commit is contained in:
Pavel Feldman 2022-03-29 12:27:37 -08:00 committed by GitHub
parent 5575476697
commit bd6e88b8be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 246 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
.github/workflows/tests_primary.yml vendored
View file

@ -101,21 +101,24 @@ jobs:
- run: npx playwright install --with-deps - run: npx playwright install --with-deps
- run: npm run ttest -- esm.spec.ts - run: npm run ttest -- esm.spec.ts
test_html_report: test_web_components:
name: HTML Report name: Web Components
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
- uses: actions/setup-node@v2 - uses: actions/setup-node@v2
with: with:
node-version: 12 node-version: 16
- run: npm i -g npm@8.3
- run: npm ci - run: npm ci
env: env:
DEBUG: pw:install DEBUG: pw:install
- run: npm run build - run: npm run build
- run: npx playwright install --with-deps - run: npx playwright install --with-deps
- run: npm run htest - run: npm run test-html-reporter
if: matrix.os != 'ubuntu-latest' if: always() && matrix.os != 'ubuntu-latest'
- run: xvfb-run npm run htest - run: xvfb-run npm run test-html-reporter
if: matrix.os == 'ubuntu-latest' 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'

3
package.json
View file

@ -18,7 +18,8 @@
"wtest": "playwright test --config=tests/library/playwright.config.ts --project=webkit", "wtest": "playwright test --config=tests/library/playwright.config.ts --project=webkit",
"atest": "playwright test --config=tests/android/playwright.config.ts", "atest": "playwright test --config=tests/android/playwright.config.ts",
"etest": "playwright test --config=tests/electron/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", "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", "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", "ct": "playwright test tests/components/test-all.spec.js --reporter=list",

1
packages/trace-viewer/src/ui/stackTrace.css
View file

@ -24,7 +24,6 @@
.stack-trace-frame { .stack-trace-frame {
flex: 0 0 20px; flex: 0 0 20px;
font-size: smaller;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

29
packages/web/index.html Normal file
View file

@ -0,0 +1,29 @@
<!--
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.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tests</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/components/index.ts"></script>
</body>
</html>

46
packages/web/playwright.config.ts Normal file
View file

@ -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;

2
packages/web/src/common.css
View file

@ -44,7 +44,7 @@
--light-pink: #ff69b460; --light-pink: #ff69b460;
--network-content-bg: #dcdcdb; --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; --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 { html, body {

4
packages/web/src/components/expandable.tsx
View file

@ -24,13 +24,13 @@ export const Expandable: React.FunctionComponent<{
style?: React.CSSProperties, style?: React.CSSProperties,
}> = ({ title, body, setExpanded, expanded, style }) => { }> = ({ title, body, setExpanded, expanded, style }) => {
return <div style={{ ...style, display: 'flex', flexDirection: 'column' }}> return <div style={{ ...style, display: 'flex', flexDirection: 'column' }}>
<div className='expandable-title' style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', whiteSpace: 'nowrap' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', whiteSpace: 'nowrap' }}>
<div <div
className={'codicon codicon-' + (expanded ? 'chevron-down' : 'chevron-right')} className={'codicon codicon-' + (expanded ? 'chevron-down' : 'chevron-right')}
style={{ cursor: 'pointer', color: 'var(--color)', marginRight: '4px' }} style={{ cursor: 'pointer', color: 'var(--color)', marginRight: '4px' }}
onClick={() => setExpanded(!expanded)} /> onClick={() => setExpanded(!expanded)} />
{title} {title}
</div> </div>
{ expanded && <div className='expandable-body' style={{ display: 'flex', flex: 'auto', margin: '5px 0 5px 20px' }}>{body}</div> } { expanded && <div style={{ display: 'flex', flex: 'auto', margin: '5px 0 5px 20px' }}>{body}</div> }
</div>; </div>;
}; };

24
packages/web/src/components/index.ts Normal file
View file

@ -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,
});

10
packages/web/src/components/source.css
View file

@ -21,8 +21,8 @@
white-space: pre; white-space: pre;
overflow: auto; overflow: auto;
font-family: var(--monospace-font); font-family: var(--monospace-font);
font-size: 11px; font-size: 12px;
line-height: 16px; line-height: 20px;
background: white; background: white;
user-select: text; user-select: text;
} }
@ -35,13 +35,11 @@
.source-line-number { .source-line-number {
color: #555; color: #555;
padding: 0 8px; padding: 0 8px;
width: 30px; width: 40px;
margin-right: 3px;
text-align: right; text-align: right;
background: #f6f5f4; background: #f6f5f4;
user-select: none; user-select: none;
}
.source-line-number {
flex: none; flex: none;
} }

101
packages/web/src/components/source.spec.tsx Normal file
View file

@ -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(<Source text={javascriptSnippet} language='javascript'></Source>);
await expect(component.locator('text="async"').first()).toHaveClass('hljs-keyword');
});
test('highlight Python', async ({ mount }) => {
const component = await mount(<Source text={pythonSnippet} language='python'></Source>);
await expect(component.locator('text="async"').first()).toHaveClass('hljs-keyword');
});
test('highlight Java', async ({ mount }) => {
const component = await mount(<Source text={javaSnippet} language='java'></Source>);
await expect(component.locator('text="public"').first()).toHaveClass('hljs-keyword');
});
test('highlight C#', async ({ mount }) => {
const component = await mount(<Source text={csharpSnippet} language='csharp'></Source>);
await expect(component.locator('text="public"').first()).toHaveClass('hljs-keyword');
});
test('highlight lines', async ({ mount }) => {
const component = await mount(<Source text={javascriptSnippet} language='javascript' highlight={[
{ line: 4, type: 'running' },
{ line: 5, type: 'paused' },
{ line: 6, type: 'error' },
]}></Source>);
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');
});

26
packages/web/vite.config.ts Normal file
View file

@ -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,
},
});