search

percy / percy-capybara

Visual testing for Capybara with Percy.
https://docs.percy.io/docs/capybara
MIT License
45 stars 23 forks source link

Styles not rendering in the screenshots #126

Closed markcatley closed 3 years ago

markcatley commented 4 years ago

Hi,

I am having trouble with the screenshots not showing the styles. The command I'm running is yarn run percy exec -- ./bin/rails test:system. I have tried it both in CI on Github Actions, and locally on macOS. Screenshots using the take_screenshot rails method works correctly.

I am not sure what information I give to help, but:

What other information would be helpful?

Thank you in advance for your help.

Robdel12 commented 4 years ago

Hey @markcatley! This typically happens when building with webpack in dev mode. Webpack 4 introduced a change where CSS is generated as a blob: asset, which cannot be captured (this also happens with source maps enabled too). I'd try disabling source maps in tests. If that doesn't work, try building as production.

markcatley commented 4 years ago

Thanks, @Robdel12.

I added the following to my webpacker.yml and it's looking a lot better:

test:
  ...
  # Extract and emit a css file
  extract_css: true

Perhaps that needs to go in your documentation somewhere? Or is it and I missed it?

I still have some visual issues in percy that are not present if I take a screenshot using the take_screenshot. Particularly around special characters. One example is that instead of displaying an m dash correctly I am seeing —. I have similar issues with a copywrite symbol.

Any ideas?

Robdel12 commented 4 years ago

Hey @markcatley! I had a half typed response here that I never sent through, sorry about that! I have updated the docs to reflect the webpacker changes: https://docs.percy.io/docs/capybara#section-missing-styles

As for special chars showing up as †-- that usually means there's a missing charset meta tag in the <head>. If you could reach out to support (via intercom), we can take a look at a few specific snapshots to verify.

markcatley commented 4 years ago

Thanks for the reply. I had started to wonder 😊.

I had thought that maybe adding a chat set tag to the head might help. I was going to find time today to try it out. I’ll give it a go and let you know.