Test REST and GraphQL Contracts Beside Your UI with cy.request()
A broken API contract often surfaces as a vague UI failure: expected [data-cy="order-total"] to contain "$42.00" Was the React component wrong? Did the API rename total to amount ? Did GraphQL return 200 with an errors array? A focused API test answers those questions closer to the boundary that changed. Cypress can run REST and GraphQL checks through cy.request() in the same specs,…
API contract issues frequently manifest as ambiguous UI problems: the React component might be incorrect, or the API could have renamed "total" to "amount." GraphQL responses can return HTTP 200 status but contain errors in the body. Cypress allows running REST and GraphQL tests via `cy.request()` within the same specifications, configuration, and CI job as the UI tests.
When testing a REST endpoint like `GET /api/cart`, ensure the response contains the fields needed by the checkout process and adheres to domain constraints. Use assertions to verify the status code (200), presence of required keys (id, items, subtotal, tax, total, currency), the total being a number and non-negative, the currency being one of USD, EUR, or GBP, and each item in the body including sku, quantity, and unitPrice.
For expected error responses, disable Cypress's default status-code failure and assert the API's error contract. For instance, when making a POST request to `/api/orders` with an empty items array, expect a 422 status code and an `errors` object including a specific field and code.
GraphQL queries must also be tested. Although GraphQL typically uses a single endpoint, successful transport does not guarantee a successful query. Assert both the expected data and the absence of errors. Use `cy.request()` with a POST method to `/graphql`, passing the query and variables. Verify the status code is 200, ensure there are no error properties, and confirm the returned order data matches the expected structure (id, status, currency).
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.