Keep your Documentation updated with Cypress and GitHub Actions

A bunch of pictures

My own Experience

Home

Landing Section

About me

About me Section

Projects

Projects Section

Writing

Writing Section

404

404 Page
Time to automate

Setting up Cypress 🤖

# npm> npm install cypress — save-dev
# yarn
> yarn add cypress — dev
{  "baseUrl": "http://localhost:3000/",  "screenshotsFolder": "screenshots"}
// cypress/integration/health.spec.jsit('health test', () => {
cy.visit('/');
});
> yarn cypress run====================================================================(Run Starting)Running:  health.spec.js                                                                  (1 of 1)  ✓ health test (293ms)1 passing (304ms)(Results)✨  Done in 9.67s.

Taking screenshots with Cypress 📸

describe(‘Photographer’, () => {
beforeEach(() => {
cy.viewport(‘macbook-15’); // Desktop viewport
});

// Taking screenshots by Sections
it(‘Landing Section’, () => {
cy.visit(‘/’);
cy.get(‘#home’).screenshot(‘Landing’);
});

it(‘About Section’, () => {
cy.visit(‘/’);
cy.get(‘#about’).scrollIntoView().screenshot(‘About’);
});

// Taking screenshots of the whole page
it(‘404 Page’, () => {
cy.visit(‘/’);
cy.get(‘#404’).screenshot(‘404’);
});
});
📦screenshots
┗ 📂photographer.test.js
┣ 🖼404.png
┣ 🖼About.png
┣ 🖼Landing.png
┣ 🖼Projects.png
┗ 🖼Writing.png
## Screenshot and Design 🖼| Section | Screenshot || — — — — | : — — — — — — — — — — — — — — — — — — — — — — — — — — — — : || Home | ![Home](screenshots/photographer.test.js/Landing.png) || About me | ![About me](screenshots/photographer.test.js/About.png) || Projects | ![Projects](screenshots/photographer.test.js/Projects.png) || Writing | ![Writing](screenshots/photographer.test.js/Writing.png) || 404 | ![404](screenshots/photographer.test.js/404.png) |

Automatizing the screenshot (now for real)

# npm
> npm install start-server-and-test — save-dev
# yarn
> yarn add start-server-and-test — dev
{
“scripts”: {
“test”: “cypress run”,
“start”: “react-scripts start”,
“take-screenshots”: “start-server-and-test 3000”
}
}
➜ my-project git:(master) ✗ yarn take-screenshotsyarn run v1.22.5$ start-server-and-test 30001: starting server using command “npm run start”and when url “[ ‘http://localhost:3000' ]” is responding with HTTP status code 200running tests using command “npm run test”
Problem Solved
# .github/workflows/update-docs.yml
# Workflow name
name: Update Docs

# Run on every push to master
on:
push:
branches: master

jobs:
# Job name
update-readme:
# Environment setup
runs-on: ubuntu-latest
# job
steps:
-
name: Checkout repository
uses: actions/checkout@v2
- name: Setup Node
uses: actions/setup-node@v1
- name: Install dependencies
run: yarn install — frozen-lockfile
- name: Take screenshots
run: yarn take-screenshots
- name: Commit screenshots
uses: stefanzweifel/git-auto-commit-action@v4
with:
commit_message: Update Screenshots

Taking it to the next level 🚀

describe(‘Dynamic Photographer’, () => {
const routes = require(‘../fixtures/routes.json’);
beforeEach(() => {
cy.viewport(‘macbook-15’); // Desktop viewport
});
routes.forEach((route) => {
it(`${route}`, () => {
cy.visit(‘/’);
cy.get(‘#shared-section-id’).screenshot(route);
});
});
});
// generate-docs-readme.jsconst fs = require(‘fs’);
const routes = require(‘./cypress/fixtures/routes.json’);
const routeToTable = (route) =>
`| ${route} | ![${route}](screenshots/photographer.test.js/${route}.png) |`;
const content = [
‘## Pages Screenshots’,
‘Dynamic screenshots based on the last version deployed.’,
‘| Page | Screenshot |’,
‘| — — | : — -: |’,
…routes.map(routeToTable),
];
fs.writeFileSync(‘photographer.md’, content.join(‘\n’));

Last Words

References

Software Engineer during the day, cook at night 👨‍🍳 Traveller and Foodie 🧳 Whenever I can I like to write and speak 🤓 Berlin 📍

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store