NicholasBoll

export const getByName = (name: string) => function getAlarmByName($container: JQuery): JQuery {
  return $container.find(`.alarm-card:contains("${name}")`)
}

NicholasBoll

const addContext = (report, screenshots, videoUrl) => {
  const getTests = t => t.tests
  const getSuites = t => t.suites

  const addSuiteContext = (suite, previousTitles = []) => {
    const titles = suite.title ? previousTitles.concat(suite.title) : previousTitles
    getTests(suite).forEach(test => {
      test.timedOut = false // for some reason this is dropped
      const context = [
        {

NicholasBoll

Best Practices for Writing tests

A test isn't given much though until it fails. Anybody should be able to look at a test and understand what and why it failed. Tests should be written for the failure case. Cypress creates an outline in the GUI to help us understand setup and what a test does. Well written tests help us understand what failed. Screenshots and video help us understand how it failed.

Before continuing, read Best Practices from the Cypress documentation first.

Each test must be runnable in complete isolation

A way to decrease test suite run time is to increase the amount of tests being run at the same time. Sharding (or splitting or work) typically happens at the file level, so at minimum a test file should not rely on any state from a previous test file.

NicholasBoll

interface AliasFn<Subject> {
  (): Cypress.Chainable<Subject>
  alias: string
}

declare namespace Cypress {
  interface Chainable<Subject> {
    createAlias(): AliasFn<Subject>

    getAliases<T1, T2, T3, T4>(values: [AliasFn<T1>, AliasFn<T2>, AliasFn<T3>, AliasFn<T4>]): Chainable<[T1, T2, T3, T4]>

NicholasBoll

const getFoo = cy.wrap('foo').createAlias()
const getBar = cy.wrap('bar').createAlias()
const getOne = cy.wrap(1).createAlias()

// get one alias
getFoo().then(subject => {
  subject // string
  console.log(subject) // logs 'foo'
})

NicholasBoll

cy.wrap('foo').as('bar')

cy.get('@bar').then(subject => {
  subject // JQuery<HTMLElement>
  console.log(subject) // logs 'foo'
})

cy.get<string>('@bar').then(subject => {
  subject // string
  console.log(subject) // logs 'foo'

NicholasBoll

import expect from 'expect'

// Put this in cypress/support/commands.js to use everywhere
Cypress.Commands.overwrite('should', (originalFn, subject, expectation, ...args) => {
  // See if the expectation is a string and if it is a member of Jest's expect
  if (typeof expectation === 'string' && expect(subject)[expectation]) {
    return originalFn(subject, (s) => expect(s)[expectation](...args))
  }

  return originalFn(subject, expectation, ...args)

NicholasBoll

import expect from 'expect'

describe('page', () => {
  it('should allow usage of expect directly from jest', () => {
    cy.wrap(5).should(subject => {
      expect(subject).toEqual(5)
    })

    cy.wrap({ foo: 'bar' }).should(subject => {
      expect(subject).toHaveProperty('foo', 'bar')

NicholasBoll

it('should allow chaining of all the helpers', () => {
  createTodo('Learn Cypress Command API')
    .then(updateTodo('Learn Cypress composition'))
    .then(markAsDone)
    .then(deleteTodo)

  cy.get('.todoapp')
    .should('not.contain', 'Learn Cypress composition')
})

NicholasBoll

export const createTodo = (todoDescription: string) => {
  // we use `any` here until this PR is accepted: https://github.com/cypress-io/cypress/pull/1289
  const log: any = Cypress.log({
    name: 'createTodo', // This should be pretty short. It shows up as all caps
    message: todoDescription, // Outputs to the right of the "name". This can be longer and will wrap
    consoleProps() { // Additional debug info. For example, cy.visit will show cookies and redirects
      return {
        'Inserted Todo': todoDescription,
      }