cypress-websocket-testing

Test your WebSocket endpoints using Cypress.

Table of Contents

• Background
• Installation
• Usage
  • JavaScript
  • TypeScript
• Arguments
• Running the examples
• PRs
• TODO
• License

Background

Cypress comes out of the box with a great set of tools that allow both UI and API integration tests to be written. Unfortunately the cy.request() command is limited to REST endpoints only, so this library is here to help with those cases when WebSockets need to be called/tested as part of more complex integration/E2E tests.

Installation

npm i -D @lensesio/cypress-websocket-testing
# or
yarn add -D @lensesio/cypress-websocket-testing

You also need to add rxjs to the project.

npm i -D rxjs

Usage

JavaScript

@lensesio/cypress-websocket-testing extends Cypress' cy command.

Add this line to your project's cypress/support/commands.js:

import { addStreamCommands } from '@lensesio/cypress-websocket-testing';
addStreamCommands();

Then, in your test, you can use both commands that come with this lib. cy.stream and cy.streamRequest.

// For common cases:
cy.streamRequest(config, options).then(results => {
        expect(results).to.not.be.undefined;
})
// When in need of a bit more flexibility
cy.stream(config).then(subject => {
      subject
        .pipe(
          takeUntil(timer(1000)),
          reduce((acc , val) => acc.concat([val]), [])
        )
        .subscribe({
          next: (results) => {
            expect(results).to.not.be.undefined;
          },
          error: (err) => {},
          complete: done
        });
    });

TypeScript

As the library is written in Typescript, you can pass the type of the message to the command and to the config/options object. ( make sure that you already configured your Cypress tests to work with TS )

First, add @lensesio/cypress-websocket-testing to the cypress/tsconfig.json file

{
  "compilerOptions": {
    "types": [
        "cypress",
        "@lensesio/cypress-websocket-testing"
    ]
  }
}

Then to use in TypeScript tests:

// For full set of config values, check rxjs documentation
const config: WebSocketSubjectConfig<IMessage> = {
  url: "ws://localhost:8080/"
};

let options: Partial<StreamRequestOptions<IMessage>>;

cy.streamRequest<IMessage>(config, options).then((results?: IMessage[]) => {
        expect(results).to.not.be.undefined;
})
cy.stream<IMessage>(config).then(subject => {
      subject
        .pipe(
          takeUntil(timer(1000)),
          reduce((acc: IMessage[], val: IMessage) => acc.concat([val]), [])
        )
        .subscribe({
          next: (results?: IMessage[]) => {
            expect(results).to.not.be.undefined;
          },
          error: (err: any) => {},
          complete: done
        });
    });

Note: There are some type conflicts when extending/adding operators to cy.stream() in tests directly. (due to issues with Cypress including an old rxjs version as a dependency). Best way is to extend cy.stream() by building a custom command with it and use that instead.

Arguments

• config

A WebSocketSubjectConfig object. See official docs for more information. Is passed as is to the underlying webSocket subject.

• options:StreamRequestOptions (only for streamRequest command. Although optional, at least the takeWhileFn should be set)

Usage cy.streamRequest(config, options).

Running the examples

In order to try this project locally, you need to npm install in both the root and the examples/ folder. After, build the library using npm run build in the root folder, then go to examples/ , start the websocket server npm start and cypress using npm run test:local.

PRs

PRs are welcome. Be sure to add

• Tests
• Reason for the PR

TODO

• [] Find a fix for the cy.wrap workaround.
• [] Improve error handling.
• [] Add more examples for cy.stream command.

LICENSE

Apache 2.0