bug: www output target is not needed #42

pfteter · 2024-06-13T08:57:16Z

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

https://no-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>`)
}```

The text was updated successfully, but these errors were encountered:

ionitron-bot bot added the triage label Jun 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: www output target is not needed #42

bug: www output target is not needed #42

pfteter commented Jun 13, 2024 •

edited

Loading

bug: www output target is not needed #42

bug: www output target is not needed #42

Comments

pfteter commented Jun 13, 2024 • edited Loading

Prerequisites

Stencil Playwright Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Additional Information

pfteter commented Jun 13, 2024 •

edited

Loading