garris / garris/BackstopJS

Font-family in backstopJS screenshots through docker container are different than the local environment

Open
#981 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.2k
Forks
621
PR merge metrics
No merged PRs in 30d

Description

Hello everyone and of course @garris
We are using `BackstopJS` to run visual regression tests for the application that we are working on
In beginning we were running it locally and all css properties were rendered correctly including the `font-family`
but since we set backstopJS to be executed from docker container we started to have wrong `font-family` causing that all tests are failing: here an example of failing test:

![screenshot from 2019-02-05 16-52-13](https://user-images.githubusercontent.com/13581057/52259583-8ec21d80-2966-11e9-852a-2d5aa31725c5.png)

I do not understand why we have such difference between local tests and docker tests
need to have same results in local and docker in purpose to finish implementing the visual regression test
as a hack I installed the font-family through a `Dockerfile`
here the code:
```
FROM backstopjs/backstopjs
ADD https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip /tmp
RUN apt-get update && \
apt-get install -y unzip && \
unzip /tmp/NotoSansCJKjp-hinted.zip && \
mkdir -p /usr/share/fonts/noto && \
cp *.otf /usr/share/fonts/noto && \
chmod 644 -R /usr/share/fonts/noto/ && \
fc-cache -fv
```
As result the conflict of font-weight disappeared but I keep having test errors and I can conclude that the web-font that we are using is not being rendered when we are using docker container

the way I am using the font-family in `base.less` is
```CSS
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");

*:not(.fa) {
font-family: "Noto Sans", "Noto Sans CJK JP", "Noto Sans Japanese", "メイリオ",
meiryo, "MS Pゴシック", "ms pgothic", sans-serif;
}
```

and in theme for `material-ui` is:
```TS
const theme = {
typography: {
fontFamily: [
"Noto Sans",
"Noto Sans CJK JP",
"Noto Sans Japanese",
"メイリオ",
"meiryo",
"MS Pゴシック",
"ms pgothic",
"sans-serif",
].join(","),
useNextVariants: true,
},
};
```
Thank you for reading and help
```
backstopJS v 3.8.8
css-loader v "2.1.0"
less-plugin-clean-css v "1.5.1"
mini-css-extract-plugin v "0.5.0"
optimize-css-assets-webpack-plugin v "5.0.1"
@material-ui/core v "3.9.1"
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.