bug: www output target is not needed #42
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Playwright Version
0.2.0
Current Behavior
According to the doumentation a www output is needed / eventually full build to run PW-Stencil.
On big projects with file scanning antivirus tools this leads to a huge preformance drop - up to few minutes.
Expected Behavior
- No stencil build is needed to run it - just reference to dist folder - this can be avoided with customizing command
- www output is not needed but it is per documentation
Steps to Reproduce
run the project
Code Reproduction URL
Additional Information
Here is a small PoC that directly consumes dist without having to run stencil / page routes
import {test as base, expect} from '@playwright/test';
const extendedHtml = html => `
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stencil Playwright Test</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="http://localhost:3333/library.css" />
<script type="module" src="http://localhost:3333/library.esm.js"></script>
<script nomodule src="http://localhost:3333/library.js"></script>
</head>
<body>
${html}
</body>
</html>`;
// even better to add a render extension/fixture to test, have to check
export const test = base.extend({
page: async ({page}, use: (r) => Promise<void>) => {
page['render'] = async (html: string, options?) => {
await page.setContent(extendedHtml(html), options);
await expect(page.locator('.library-hydrated')).toBeVisible();
const container = page.locator('body > *').first();
await expect(container).toBeVisible();
return {container};
};
await use(page);
},
});
playwright.config.ts
....
webServer: {
command: 'npx http-server -s -p 3333 -a localhost ./dist/library',
url: 'http://localhost:3333/library.esm.js',
},
Sample test:
test('Button test', async ({page}) => {
const {container} = await page.render(`
<button color="primary">Save</button>
`);
await expect(container).toBeVisible();
with renderer fixture it can be
test('Button test', async ({render}) => {
render(`<...html>`)
}```