Open-Xchange App Suite: CodeceptJS

App Suite specific CodeceptJS tooling.

Custom Helpers

The file src/helpers.js contains App Suite specific CodeceptJS helpers. It is possible to overwrite any of these helpers or add new ones in projects that use this package. This might be useful for maintenance work on existing helpers or when developing new ones and can be achieved with the following changes:

// CodeceptJS configuration of a local package
// file: e2e/codecept.conf.js

const { config } = require('@open-xchange/appsuite-codeceptjs')

// import local helpers
config.helpers.AppSuite = {
  require: './helper'
}

module.exports.config = config

// Local helpers
// file: e2e/helper.js

const Helper = require('@open-xchange/appsuite-codeceptjs/src/helper')

class CustomHelper extends Helper {
  // This overwrites the existing `selectFolder` helper
  async selectFolder (locator) {
    locator = '.folder-tree ' + locator
    await this.helpers.Playwright.page.locator(locator).click()
  }

  // This creates the new helper `newCostumHelper`
  async newCostumHelper () {
    await this.helpers.Playwright.waitForVisible({ css: 'html.complete' }, 10)
  }
}

module.exports = CustomHelper

Test Metrics (Hindsight)

Test results and performance measurements are reported via @open-xchange/codeceptjs-hindsight, configured as the hindsight plugin. Set HINDSIGHT_CLIENT_ID and HINDSIGHT_CLIENT_SECRET to report to the API; without them the plugin only prints to stdout.

A failing test also reports its error message, stack trace and a link to the failure screenshot. Because test output can contain credentials, this package strips E2E_ADMIN_PW and PROVISIONING_PASSWORD from that evidence by default (the plugin removes its own clientSecret in any case). Project specific secrets need to be added:

// file: e2e/codecept.conf.js
const { config } = require('@open-xchange/appsuite-codeceptjs')

config.plugins.hindsight.redact.push(process.env.SOME_API_TOKEN)

module.exports.config = config

In CI the same can be done without touching the config, by setting the comma-separated HINDSIGHT_REDACT.

The screenshot link needs no configuration in CI: the plugin builds it from CI_JOB_URL plus the screenshot's path relative to CI_PROJECT_DIR, which for the standard e2e job resolves to the artefact that job already uploads:

https://gitlab.com/<project>/-/jobs/<job id>/artifacts/file/output/<Scenario>.failed.png

Two things have to hold for that, and both are true for the shared e2e job: the job publishes the output directory via artifacts:paths, and the output directory lies inside CI_PROJECT_DIR (E2E_OUTPUT_DIR=$CI_PROJECT_DIR/output, even though the tests themselves run from /e2e in the container). A screenshot written outside the project directory cannot be addressed as a job artefact, so the plugin falls back to reporting the runner-local path — as it does for local runs. The link dies once the job's artefacts expire.

HINDSIGHT_ARTEFACT_BASE_URL (or config.plugins.hindsight.artefactBaseUrl) is the escape hatch for publishing screenshots somewhere else. Note that the path relative to CI_PROJECT_DIR is appended to it, so the base must not repeat the output/ segment.

Local Configuration Overwrite

You can use the config object for local customization of the default CodeceptJS configuration provided by this package. For example you can change the tests directory the following way:

// CodeceptJS configuration of a local package
// file: e2e/codecept.conf.js

const { config } = require('@open-xchange/appsuite-codeceptjs')

config.tests = './costum_directory/*_test.js'

module.exports.config = config