You can check my original post on medium here: End-to-end, continuous integration with CodeceptJs on GitHub.
First of all, we should go to GitHub and create a new repository. As npm is going to be used later on for CodeceptJs, I strongly recommend that you initialize this repository with a .gitignore set up for Node.
With our new repository, we can just clone it to our machine and start working on it.
Now we need to set-up a Codecept-Js test with Puppeteer. You can do so, by following this really simple and straightforward quick start guide from the framework itself.
After setting it up just make sure that the test is passing when you run it locally.
Push our new test to the repository origin at GitHub. Then Again on GitHub, we can go to the actions tab on our repository.
There, we can search for the Node.js workflow and click on Set up this workflow.
After that GitHub is going to create a new template config file at repository-name/.github/workflows/nodejs.yml. We can start editing this file right-away on GitHub, actually, we are going to change only three lines so it stays like this:
name: Node.js CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [13.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: |
npm install
npx codeceptjs run --override '{"helpers": {"Puppeteer": {"show": false}}}' --steps
env:
CI: true
On line 3, we change when our workflow is triggered:
on: [push, pull_request]
So with it, our workflow is going to be run every time we push something or open a new pull request to our repository.
If you are asking yourself which other events can trigger a workflow and how to configure them, you can check this link from the documentation.
On line 12, we can set the node version that is going to be used:
node-version: [13.x]
We are going to use the latest version of Node, which at this point is 13.8.0, according to the official GitHub actions documentation:
The ‘x’ is a wildcard character that matches the latest minor and patch release available for a version.
If we wished, we could run our workflow on a specific node version, or even in multiple versions, you can find more about it on this link.
On line 20, we set the commands we want to use:
- run: |
npm install
npx codeceptjs run --override '{"helpers": {"Puppeteer": {"show": false}}}' --steps
Here we use pretty much the same commands we would use to test our code locally.
Except that, as the workflow can’t open an instance of Chromium to run the test, we need to specify that the tests are going to be run headless, and that’s exactly what the overhide option is doing here. It overrides our show option to false at our codecept.conf file at run time.
I believe this is a useful approach as we can set our workflow properly and still don’t lose the ability to visually see the tests running on our local machine.
Just commit your changes to the config file, and with that, we are ready to go.
As our workflow is set to run on pushes, as soon as you commit your changes you can go to the actions tab, and see your workflow running there.
Another thing that many people like doing is putting passing / failure badges at the readme.md file. To that, again on the actions, first, click on the Node.js workflow, then on Create status badge, and finally at Copy status badge Markdown.
Finally, you can go to your readme.md file and paste your badge anywhere you like.
If anything went missing here, you are welcome to check the full code of this article at my repository on GitHub.