Question

我们如何为Stencil.js newE2EPage设置全局样式。

newE2EPage似乎有一个addStyleTag方法。这是我们可以用来设置样式的方法吗？如果可以，怎么办？

Answer 1

是的，您可以使用{puppeteer的page.addStyleTag（请参阅https://pptr.dev/#?product=Puppeteer&version=master&show=api-pageaddstyletagoptions）。

describe('Some Page', () => {
  let page: E2EPage;

  beforeEach(async () => {
    page = await newE2EPage({ html: '<my-comp />');
    await page.addStyleUrl('/build/app.css'); // replace "app" with your namespace
  });
});

Answer 2

我尝试了page.addStyleUrl（...，但是它不起作用。相反，我发现唯一的方法是修改我正在加载的html以包含样式表。

专门用于Stenciljs E2E测试的正确行是：

const page = await newE2EPage(
  {html:
    `<head><link rel="stylesheet" href="/build/your-project.css"></head>
     <body><your-component></your-component></body>`
  });

我已经测试过它可以从构建目录正确加载。我尝试在本地加载，但是没有用。但是，我还没有进行全面的测试来确定其他位置可以工作。

Stencil.js newE2EPage样式

2 个答案: