Automatic Site Validations

[alex-bezek]

I'm assuming you use this repo for validating changes to the theme repo. I understand I'm opening a lot of PRs which can take a lot of time to validate and test. A tool i've found very useful for validating changes is percy.io which will automatically take screenshots of all of the pages and do a visual diff as a github check which highlights visual screenshot differences between branches. This creates views like this for each PR that you can then approve to check visual diffs across viewports and browsers

If you wanted to set something similar up for this repo, I did so doing the following

• setup a percy.io account in the free tier https://percy.io/pricing which provides 5k screenshots per month (no credit card info required)
• Install the percy.io github app from https://github.com/marketplace/percy
• configure the percy.io secret token in your repo's secrets settings
  • https://github.com/alex-bezek/blog/pull/37/files#diff-1c9579411502b578b6eca8e2f703367a9a8be40cf7dda98e9e23208e00a342fdR29
  • https://docs.github.com/en/free-pro-team@latest/actions/reference/encrypted-secrets

For my site, this does generate 48 screenshots (each of my posts and home page across firefox and chrome across 2 viewports) which would give me ~100prs worth of screenshots per month. Since your site has many more posts, it would probably be good to restrict the number of pages it actually tests to be a more reasonable amount via https://docs.percy.io/docs/sdk-configuration#snapshot.

I also setup https://dependabot.com/submodules/ to automatically create PRs updating my submodule. This combined with percy + i use vercel to auto deploy all PR branches (which you use netlify but it does the same thing). These things combined make for some really nice automation around PR validation and consuming new theme changes (like this alex-bezek/blog#47 ).

I just thought i would share to see if you were interested.

[hossainemruz]

Sound good to me. I will give a try.

[hossainemruz]

Todos:

• Add dependabot integration
• Add percy.io integration
• Add lighthouse check

[alex-bezek]

If you choose to do percy.io at some point, FYI i added the following configs to my own site

./.percy.yml

version: 1
snapshot:
  percy-css: |
    #ityped {
      display: none;
    } 

Disables the ityped animations that would otherwise always show up as a diff

.github/workflows/percy.yml

          flags: --snapshot-files=index.html,404.html,posts/rails-environment-vs-deploy-environment/index.html
          config: ./.percy.yml

added configs so it just scans the main pages and 1 post. otherwise it scans every post and I could end up passing the free tier of 5k snapshots a month. Pr here https://github.com/alex-bezek/blog/pull/53/files

[hossainemruz]

Thank you @alex-bezek. I tried adding Percy. However, I wasn't able to open account in Browserstack. The login page seemed unresponsive. I will try again soon.

[hossainemruz]

Hi @alex-bezek I have completed percy.io integration. I have made some changes on how you passed the config and snapshot-files. Take a look here: #17

Let me know if there is any other tool we should add. :P

[alex-bezek]

Nice! I do like your lighthouse comment on that PR, my setup isn't as fleshed out. I did just finish writing a post on the tools I setup, the only other one I have right now is imgbot which will resize images automatically for you for performance https://alexbezek.io/posts/managed-by-robots/#image-bot-optimizer . Like it would probably flag and optimize this image https://github.com/hossainemruz/toha-example-site/blob/master/static/images/background.jpg since its huge and is impacting your lighthouse score

Then again you aren't probably making new daily posts on this site, so we could optimize them manually once and be done, up to you. Regardless, I'm glad it worked out for you!