How to Test with CodeceptJS using 0Browser, a Headless Browser as a Service

Testing a WebPage using CodeceptJS

We can leverage different frameworks for writing acceptance tests.

In this article, let's see how we can test a simple web component using CodeceptJS and 0Browser. We will walk through an automated end to end testing scenario, to verify a webpage title is correctly set to the expeccted value.

1.Prerequisites

1.1. Node.js

First, let's make sure you have Node.js installed. You can download and install Node from NodeJS.org website.

1.2. Initialize npm

If you haven't done so already go a head and create package.json file used by npm. Once initialized you will be able to add more dependencies to your project. You can find more information here.

> npm init -y
# answer yes to all default prompt questions.

1.3. NPM packages

Let's install Puppeteer and CodeceptJS npms as dev dependencies by running the following commands:

npm install --save-dev codeceptjs puppeteer

1.4. API Key

Have your 0Browser API key handy by fetching it from your 0Browser Account page here.
For more details on this, here is a tutorial on how to fetch your 0Browser API key.

2.Setup

Now that we have all the prerequisites in order, let's get to the fun part!

The easiest way to start, is to use CodeceptJS init command to initialize a new project.

npx codeceptjs init

Codeceptjs will walk you through a series of questions. Answer them one by one similar to the following snippet.

Welcome to CodeceptJS initialization tool
It will prepare and configure a test environment for you

Installing to C:\Users\raham\OneDrive\Desktop\test
? Where are your tests located? (./*_test.js)
    # press enter

? What helpers do you want to use?
    WebDriver
    > Puppeteer
    TestCafe
    Protractor
    Nightmare
    Appium
    # select Puppeteer

? Where should logs, screenshots, and reports to be stored? (./output)
    # press enter

? Do you want to choose localization for tests? (Use arrow keys)
    > English (no localization)
    pt-BR
    ru-RU
    it-IT
    pl-PL
    zh-CN
    zh-TW
    (Move up and down to reveal more choices)
    # we selected English, select your locality.

? [Puppeteer] Base url of site to be tested (http://localhost)
    # we entered https://0browser.com

? [Puppeteer] Show browser window (Y/n)
    # enter 'n' and press enter

? [Puppeteer] Browser viewport size (1200x900)
    # press enter

    Creating a new test...
    ----------------------
? Feature which is being tested
    # enter 'test 0browser landing page has a title'

? Filename of a test (test_0browser landing page has a title_test.js)
    # eneter 'test_title'

    Test for test_title was created in C:\test\test_title_test.js

    --
CodeceptJS Installed! Enjoy supercharged testing! ?
    Find more information at https://codecept.io

Test

Perfect ! We should have everything we need setup. To get started with the testing senario, let's open test_title_test.js.
We can now test 0browser's landing page's title. Following code snippet shows how to test www.0Browser.com landing page title is correctly set to "0Browser"!

Feature('test 0browser landing page has a title');

Scenario('test something', (I) => {
    I.amOnPage('https://0browser.com');
    I.seeInTitle('0Browser');
});

We should now point our test to 0Browser. It is very simple!
Open codecept.conf.js and change Puppeteer and add browserWSEndpoint

const { setHeadlessWhen } = require('@codeceptjs/configure');

// turn on headless mode when running with HEADLESS=true environment variable
// HEADLESS=true npx codecept run
setHeadlessWhen(process.env.HEADLESS);

exports.config = {
  tests: './*_test.js',
  output: './output',
  helpers: {
    Puppeteer: {
      url: 'https://0browser.com',
      show: false,
      windowSize: '1200x900',
      chrome: {
        browserWSEndpoint:
          "wss://proxy.0browser.com?token={YOUR-API-KEY}&timeout=60000"
      }
    }
  },
  include: {
    I: './steps_file.js'
  },
  bootstrap: null,
  mocha: {},
  name: '0browser-codeceptjs-puppeteer',
  plugins: {
    retryFailedStep: {
      enabled: true
    },
    screenshotOnFail: {
      enabled: true
    }
  }
}

Find this source code on Github

Run

We run the test using npx codeceptjs run --steps command.

> npx codeceptjs run --steps

You should see an output similar to the screen shot below, verifying that the 0Browser landing web page title is correctly set!

CodeceptJS success results

Simple, Right? Great job!

Have fun testing your website using CodeceptJS framework. We are here to help at 0Browser. Don't hesitate to contact us if you need help.

Code Sample

You can find the full test code sample here on Github


...
0Browser