True end-to-end testing and confident deployments! The Tracetest and Cypress integration is changing the game in front-end testing. Say hello to full system visibility!
OpenTelemetry and distributed tracing are critical in enabling troubleshooting and monitoring of your complex, distributed, Cloud Native application.
Cypress is a powerful tool for testing front-end applications, enabling quick and confident releases of front-end changes. Imagine if you could combine Cypress with distributed traces.
Now you can! Use distributed traces directly in your Cypress tests to cover the entire distributed system, including both the front end and back end, with trace-based tests. Here’s how Tracetest and Cypress fell in love. 👇
The Tracetest integration with Cypress provides:
Well, the marriage has happened, and we would like to invite you to attend the reception party!
Tracetest, the leading trace-based test tool, now works directly with your current Cypress tests to fully test your instrumented application. Bring your favorite observability tracing backend, such as Jaeger, Tempo, Honeycomb, AWS X-ray, Dynatrace, Sumo Logic, or 9 others to the event, and let’s party!
Let’s look at the rich artifacts provided by these observability enabled Cypress tests.
First, you get the rich results provided by a Cypress test:
Second, you get a distributed trace, showing entire process flow provided by instrumentation in your frontend and backend:
Finally, using trace-based testing assertions, you can have your Cypress test also verify the proper execution of the full system:
As shown, trace-based tests can assert the following:
With these assertions created and included in the Cypress test, the test now can assert across the entire system, verifying both functionality and performance.
There are a few requirements:
The instructions provide a full example, with an instrument cloud native app, an OTel instrumented react front end, and Cypress tests with Tracetest included. This is an example of a Cypress test which includes a trace-based test:
```javascript
import Tracetest, { Types } from '@tracetest/cypress';
const TRACETEST_API_TOKEN = Cypress.env('TRACETEST_API_TOKEN') || '';
let tracetest: Types.TracetestCypress | undefined = undefined;
const definition = `
type: Test
spec:
id: aW1wb3J0cyBhIHBva2Vtb24=
name: imports a pokemon
trigger:
type: cypress
specs:
- selector: span[tracetest.span.type="http"] span[tracetest.span.type="http"]
name: "All HTTP Spans: Status code is 200"
assertions:
- attr:http.status_code = 200
- selector: span[tracetest.span.type="database"]
name: "All Database Spans: Processing time is less than 100ms"
assertions:
- attr:tracetest.span.duration < 2s
outputs:
- name: MY_OUTPUT
selector: span[tracetest.span.type="general" name="Tracetest trigger"]
value: attr:name
`;
describe('Home', { defaultCommandTimeout: 60000 }, () => {
before(done => {
Tracetest({ apiToken: TRACETEST_API_TOKEN }).then(instance => {
tracetest = instance;
tracetest
.setOptions({
'imports a pokemon': {
definition,
},
})
.then(() => done());
});
});
beforeEach(() => {
cy.visit('/', {
onBeforeLoad: win => tracetest.capture(win.document),
});
});
// uncomment to wait for trace tests to be done
after(done => {
tracetest.summary().then(() => done());
});
it('create a pokemon', () => {
cy.get('[data-cy="create-pokemon-button"]').should('be.visible').click();
cy.get('[data-cy="create-pokemon-modal"]').should('be.visible');
cy.get('#name').type('Pikachu');
cy.get('#type').type('Electric');
cy.get('#imageUrl').type('https://oyster.ignimgs.com/mediawiki/apis.ign.com/pokemon-blue-version/8/89/Pikachu.jpg');
cy.get('button').contains('OK').click();
});
it('imports a pokemon', () => {
cy.get('[data-cy="import-pokemon-button"]').click();
cy.get('[data-cy="import-pokemon-form"]').should('be.visible');
cy.get('[id="id"]')
.last()
.type(Math.floor(Math.random() * 101).toString());
cy.get('button').contains('OK').click({ force: true });
});
it('deletes a pokemon', () => {
cy.get('[data-cy="pokemon-list"]').should('be.visible');
cy.get('[data-cy="pokemon-card"]').first().click().get('[data-cy="delete-pokemon-button"]').first().click();
});
});
```
Tune in live for a webinar workshop on January 24th at 9am PT (12pm ET) to learn hands-on how to enhance your existing Cypress tests with trace-based testing!
With the combination of distributed tracing, Tracetest, and Cypress, true end-to-end tests that matches Martin Fowler’s definition, is finally achieved.
An end-to-end test verifies that a system meets external requirements and achieves its goals, testing the entire system, from end to end.
With these tests in place, your entire dev team can release at high velocity with greater confidence.
Want to see some examples of these Tracetest infused Cypress tests? We are running these tests in our demo environment. Join the environment and look at the three Cypress tests:
Have questions? Join the discussion with the matchmakers of this union in the Tracetest Slack channel!
Join the Tracetest Community in one of these channels: