[SOLVED] CSS not rendering at puppeteer inside docker

Issue

I have automated browser tests using puppeteer. I ran them at Circle CI using default Circle CI windows machine. Now I'm trying to change to a docker which is based on a Microsoft Debian machine (the website is .NET). I installed chromium at this machine. The problem is the CSS is not rendered. I used page.on request/response and the css is requested, response is 200. I looked for a configuration that could be disabled, but I didn't find it - neither at StackOverflow.

Repository: https://github.com/darakeon/dfm/

Branch right now: 4.1.5.0 (it will be promoted to master when I finish the version)

The dockerfile is inside docker folder. It is at Docker Hub too, my user is darakeon. Right now the name is darakeon/net-circleci. When I solve the problem, I will rename this, to split into 2 different machines - one based on microsoft which has only libman, another based on the first, that can run puppeteer too.

Tests folder: site/Tests/Browser

Script I'm using to run tests: .circleci/browser/run-tests.sh

The most time you spent trying to solve something, the more ridiculous will be the solution. Please, call me idiot, but help me to solve this...

Solution

Discovered the problem. Here is how:

I used page.screenshot at another site on the web to check if the css was rendering at it. It was. Weird. After looking for solutions, I was always finding people teaching how to NOT show the css, intercepting the request and stopping it. So I intercepted the requests to see if the css was being requested:

    await page.setRequestInterception(true);

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

Given the requests were ok, I went to check the responses:

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

Surprise! My main css was returning 404. But why, if it worked at windows? Simple. Windows doesn't care if you call Bootstrap, bootstrap, bOOTSTRAP or BoOtStRap, them all will search the same file. Linux consider as right just the exactly same case.

So, when you get your .NET site from windows and put it at Linux, check the cases of everything.

Answered By - Dara Keon

Answer Checked By - Terry (WPSolving Volunteer)