时间戳

首页 > 解决方案 > CSS 不在 docker 内的 puppeteer 上呈现

docker - CSS 不在 docker 内的 puppeteer 上呈现

问题描述

我使用 puppeteer 进行了自动浏览器测试。我使用默认的 Circle CI windows 机器在 Circle CI 上运行它们。现在我正在尝试更改为基于 Microsoft Debian 机器（网站是 .NET）的 docker。我在这台机器上安装了铬。问题是没有呈现 CSS。我使用 page.on request/response 并请求了 css，响应为 200。我寻找了可以禁用的配置，但我没有找到它 - 在 StackOverflow 上也没有。

存储库：https ://github.com/darakeon/dfm/

立即分支：4.1.5.0（等我完成版本会升级为master）

dockerfile 在 docker 文件夹中。它也在 Docker Hub，我的用户是 darakeon。现在这个名字是 darakeon/net-circleci。当我解决问题时，我将重命名它，分成两台不同的机器——一台基于微软，只有 libman，另一台基于第一台，也可以运行 puppeteer。

测试文件夹：站点/测试/浏览器

我用来运行测试的脚本：.circleci/browser/run-tests.sh

你花在解决问题上的时间越多，解决方案就越荒谬。请叫我白痴，但请帮我解决这个问题......

标签： dockerdebianpuppeteerchromium

解决方案

发现了问题。方法如下：

我page.screenshot在网络上的另一个站点上使用过以检查 css 是否在其上呈现。它是。诡异的。在寻找解决方案之后，我总是发现有人教如何不显示 css、拦截请求并停止它。所以我截取了请求以查看是否正在请求css：

    await page.setRequestInterception(true);

    page.on('request', (req) => {
        console.log(req.url(), req.resourceType())
        req.continue();
    })

鉴于请求没问题，我去检查响应：

    page.on('response', (r) => {
        if (r.status() >= 400)
            console.error(r.url(), r.status())
    })

惊喜！我的主要 css 返回 404。但是，如果它在 Windows 上工作，为什么？简单的。Windows 不在乎你调用 Bootstrap、bootstrap、bOOTSTRAP 还是 BoOtStRap，它们都会搜索同一个文件。Linux 认为完全一样的情况是正确的。

因此，当您从 Windows 获取 .NET 站点并将其放在 Linux 上时，请检查所有情况。

推荐阅读