mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-25 12:16:44 +03:00
test: start adding component tests (#13159)
This commit is contained in:
parent
5575476697
commit
bd6e88b8be
19
.github/workflows/tests_primary.yml
vendored
19
.github/workflows/tests_primary.yml
vendored
@ -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'
|
||||
|
@ -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",
|
||||
|
@ -24,7 +24,6 @@
|
||||
|
||||
.stack-trace-frame {
|
||||
flex: 0 0 20px;
|
||||
font-size: smaller;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
29
packages/web/index.html
Normal file
29
packages/web/index.html
Normal 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
46
packages/web/playwright.config.ts
Normal 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;
|
@ -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 {
|
||||
|
@ -24,13 +24,13 @@ export const Expandable: React.FunctionComponent<{
|
||||
style?: React.CSSProperties,
|
||||
}> = ({ title, body, setExpanded, expanded, style }) => {
|
||||
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
|
||||
className={'codicon codicon-' + (expanded ? 'chevron-down' : 'chevron-right')}
|
||||
style={{ cursor: 'pointer', color: 'var(--color)', marginRight: '4px' }}
|
||||
onClick={() => setExpanded(!expanded)} />
|
||||
{title}
|
||||
</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>;
|
||||
};
|
||||
|
24
packages/web/src/components/index.ts
Normal file
24
packages/web/src/components/index.ts
Normal 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,
|
||||
});
|
@ -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;
|
||||
}
|
||||
|
||||
|
101
packages/web/src/components/source.spec.tsx
Normal file
101
packages/web/src/components/source.spec.tsx
Normal 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
26
packages/web/vite.config.ts
Normal 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,
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue
Block a user