Automating Tests using CodeceptJS and Testomat.io: First Steps

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Sonar - Write Clean JavaScript Code. Always.
  • Scout APM - Truly a developer’s best friend
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Zigi - Close all those tabs. Zigi will handle your updates.
  • CodeceptJS

    Supercharged End 2 End Testing Framework for NodeJS

    Automated runs can be configured using the API. This looks a lot like the command line for synchronizing our tests, but we have to add a the \@testomatio/reporter plugin to our project first and add it to our local CodeceptJS configuration. See the Testomat.io + CodeceptJS documentation for details, and see my GitHub issue: Testomat plugin reports failure #3403 if you don't get a success message on the command line.

  • Resemble.js

    Image analysis and comparison

    Yes, we can! Documented as "Visual Testing", the screenshot feature is a possible means of testing. We can use Resemble.js, which is a great tool for image comparison and analysis, after adding the codeceptjs-resemblehelper to our project:

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • stylelint

    A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

    Before starting build and test, let's also make sure that our source code passes static quality control, by adding the popular linting tools (eslint for JavaScript and stylelint for CSS) at the beginning of our test tool chain:

  • http-server

    a simple zero-configuration command-line http server

    If you don't have a localhost preview server already, you can add one using the http-server package and adding a "serve" target in package.json (see example source code below).

  • ingo-steinke.de

    www.ingo-steinke.com is a portfolio website about web developer Ingo Steinke which is made using HTML, CSS, JavaScript, liquid, 11ty (eleventy) build and netlify deployment. English: www.ingo-steinke.com

    You can verify, copy and paste the relevant code snippets below. I have left out some of my project's details to focus on the test setup. You can find my original source code on GitHub.

  • ESLint

    Find and fix problems in your JavaScript code.

    Before starting build and test, let's also make sure that our source code passes static quality control, by adding the popular linting tools (eslint for JavaScript and stylelint for CSS) at the beginning of our test tool chain:

  • Codeception

    Full-stack testing PHP framework

    There are enough blog posts about Jest or Cypress already, so let me introduce Codecept. It comes in two flavors. There is Codeception for PHP, and there is CodeceptJS for JavaScript which we will be using here.

  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts