search

microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
66.95k stars 3.67k forks source link

[BUG] No CSS Styling in CI/CD #28742

Closed snazzyj closed 10 months ago

snazzyj commented 11 months ago

System info

Source code

Unfortunately, best I can do is a screenshot showing our Trace report timeline. It does not seem that any CSS styling is being applied. This does not happen on any of our local dev environments and only in the CI/CD pipeline. I might be able to link our vue.config.ts file and some other configuration files but I'm really not sure what is needed.

image

Steps

Expected

Screenshot shows interface page loading with all CSS styling applied.

image

Actual

Screenshot shows interface page loading with NO CSS styling applied. image

yury-s commented 11 months ago

Can yo share a test along with the page where it's happening? Or at least a trace file with broken css?

yury-s commented 11 months ago

Actually, screenshots in the trace also show the page without css styling, so it looks like on CI you build the site differently and it doesn't apply the css.

snazzyj commented 10 months ago

@yury-s Apologies for my lack of knowledge on how CI/CD works under the hood. Why would this happen on a test CI but not our builds / deploys?

We have the PW config setup to run a npm run all command when starting up the server in CI. This in turns runs something like:

scripts: {
    "all": "concurrently -k -p \"[{name}]\" -n \"FRONTEND,API,WORKER\" -c \"red,cyan,blue\" \"npm run serve\" \"npm run api\"  \"npm run worker\"",

Could it in theory be the npm run serve command being used that is causing this to not build + apply CSS properly? As stated, this doesn't happen on local where I'm able to run the same YAML script command of "npm run test"

yury-s commented 10 months ago

Why would this happen on a test CI but not our builds / deploys?

CI machines are often times less powerful (e.g. on GitHub Actions standard one would have 2 CPU cores) than local ones which may affect timing of the operations running in parallel. I see that you run several commands in parallel in the "all" script you mentioned and that may behave differently. My hunch is it might happen that the tests start running before the server is fully up, if that's the case you can use webServer config property instead to make playwright wait.

Could it in theory be the npm run serve command being used that is causing this to not build + apply CSS properly? As stated, this doesn't happen on local where I'm able to run the same YAML script command of "npm run test"

I don't what that command does in you project, so probably it could. Maybe the build is not complete yet by the time the tests are running.

In any case, this is a problem with your project setup rather than playwright, so I'm closing this report. If you think there is a bug in playwright, feel free to open another issue and attach a repro that we could run locally to reproduce it.

snazzyj commented 10 months ago

@yury-s Thanks for your insight. Got some ideas between this thread and the discord :)