Since I'm the only dev behind my startup, Giffon 🎁, I've to take care of all the technical things from development to deployment. Though I've been following best practices and be careful about edge cases, still I don't trust the code I wrote very much.

I added a number of tests in CI to check my website before deployment, and they have caught my mistakes many times. The cool thing is, many of those tests are generic enough to be applicable to any website, so you should consider using them too!

1. Markup validation

The first easy low-hanging fruit is HTML (and CSS/SVG) validation. Most HTML templates do not enforce valid HTML, so it's quite easy to output documents with mismatched tags, which can be a pain to spot! Giffon uses ReactDOMServer, which prevents tag mismatches, but the validation still caught me many times about putting block-level elements (e.g. <ul>) in <p>, and also missing alt attribute in <img>.

Giffon's CI uses the html5validator command line tool against a development server. It's basically calling the commands as follow:

html5validator --html http://localhost:3000/every/page
html5validator --css www/css/*.css
html5validator --svg --errors-only www/images/*.svg

2. Detecting browser console error messages

The second generic error detection is to check the browser console. It reports JS run-time errors as well as broken image references and some invalid HTTP respond headers too.

Giffon's way to do it is to use Selenium web driver, navigates to each page and calls driver.get_log("browser"), asserts that there is no log.

3. Detecting horizontal scrollbars

Most websites don't use horizontal scrollbars. It's annoying (especially on mobile) when one appears due to layout bugs.

Again, Giffon's CI makes use of Selenium. The CI navigates to each page and detects the present of horizontal scrollbars by asserting the following code returns zero:

driver.execute_script(
    "document.scrollingElement.scrollLeft = 1;" +
    "return document.scrollingElement.scrollLeft;"
)

4. Spellchecking

Who doesn't make typos? It may not be critical, but having typos in your website does give a bad impression to visitors.

Giffon's CI uses spellchecker npm library. Giffon has its UI text strings isolated when I implement multi-language support, so it's easy for me to iterate over all the strings and call SpellChecker.checkSpelling(str).

If you don't have your strings isolated, you may save the html output as a file and use the good old aspell cli to list all misspelled words as follows:

cat path/to/my.html | aspell --mode=html list

Any others?

Do you run similar tests in you CI pipelines? Let me know if you have any good ones to share!