Hardware FixRecommendedDevice not working? Your driver may be the problemCheck updates for common hardware issues.Fix DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsClean PCRecommendedOne scan can reveal what keeps slowing WindowsLook for cleanup and repair opportunities.Run Scan×
Skip to content
World desk5 min

How to Add a GUI to Cypress End-to-End API Tests

Cypress API tests already have a GUI: put them in the E2E suite and run them in the built-in Test Runner. Choose interactive open mode or a visible CLI run based on what you need to inspect.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

You do not need to add a separate GUI to Cypress API tests: write the test in your E2E spec suite with cy.request(), then run it in Cypress’s built-in Test Runner. Use npx cypress open for interactive development, or npx cypress run --headed --no-exit --browser chrome to reproduce a visible CLI run and inspect it afterward.

What “adding a GUI” means for a Cypress API test

Cypress’s API tests run as end-to-end (E2E) tests and use the same built-in Test Runner as browser-based tests. There is no separate GUI package to install. The runner displays test steps in its Command Log, where you can select an API request to inspect its method, status, URL, and request and response details. Cypress’s current API guide was last updated August 26, 2026: Cypress network requests guide.

As an Amazon Associate I earn from qualifying purchases.

The important distinction is what the test is exercising. cy.request() makes a direct HTTP request from the test. It does not make the application send that request. To observe, wait for, or stub traffic made by the application, use cy.intercept() instead.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Write an API test in the E2E suite

  1. Install and configure Cypress in your project as usual. If you want to use relative API paths, set e2e.baseUrl in your Cypress configuration; it is optional when the request uses a full URL.

  2. Add the test to your E2E spec suite. The following example assumes an API endpoint that returns a successful response with a JSON body containing an id field. Replace the URL and assertions with those for your API:

    describe('API health check', () => {
      it('returns a successful response', () => {
        cy.request('https://api.example.com/health').then((response) => {
          expect(response.status).to.equal(200)
          expect(response.body).to.have.property('id')
        })
      })
    })

    cy.request() can be used to examine the response status, body, headers, and timing. Its request is a direct test request, not browser traffic from a page.

  3. Open the interactive runner using npx cypress open (or the equivalent command for your package manager). Choose the E2E testing type, then select and run your spec.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use the interactive Test Runner

In open mode, Cypress launches a headed browser and lets you run the spec interactively. As the test runs, its commands appear in the Command Log. Select the request command to inspect its method, URL, status, and request/response details. You can also select steps to investigate intermediate values in DevTools.

An application page is not required for this to be useful: the runner can display the steps and results of an API-only spec. Cypress’s historical article, “Add GUI to your E2E API tests” (published November 7, 2017), describes the reporter as showing each step of the test’s fluent API in its own row. The current documentation is the better reference for setup and current commands.

Choose between interactive open mode and a visible CLI run

Workflow Command What it is for
Interactive development npx cypress open Opens the headed Test Runner so you can select and run specs interactively.
Visible CLI reproduction npx cypress run --headed --no-exit --browser chrome Runs from the CLI with a visible Chrome browser; --no-exit leaves Cypress open after a spec so you can inspect the command log and final application state.
CI or other headless execution npx cypress run Runs headlessly by default; a visible browser is not required for API tests.

The browser and CLI flags are documented in the Cypress command-line reference and browser-launching guide. Use open mode when authoring interactively. Use the headed CLI command when you want to reproduce a CLI or CI-style run locally while retaining the runner for inspection. Headed mode is not a requirement for API testing.

Know what Cypress captures in open and run modes

  • Failure screenshots: Cypress automatically captures them during cypress run. It does not automatically take failure screenshots during cypress open.
  • Videos: Video recording is disabled by default. If enabled, Cypress records a video per spec during cypress run, not during cypress open.

See the Cypress screenshots and videos guide for the current artifact behavior and configuration.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What direct API checks are useful for

Cypress says API checks can keep UI and API tests in one runner, configuration, and CI job. Direct requests can also provide feedback on backend contract changes and make setup or teardown faster than navigating forms. Those are Cypress’s stated reasons for the approach, not a guarantee of a particular speed improvement in every project.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshoot common GUI and API-test issues

The spec does not appear in the runner

  • Confirm the test is in the project’s E2E spec suite and matches the configured spec pattern.
  • In cypress open, choose the E2E testing type before looking for the spec.

The request URL cannot be resolved

  • Use a full URL in cy.request(), or configure e2e.baseUrl if you intend to use a relative path.
  • Check that the API host is reachable from the machine running Cypress and that the URL and endpoint path are correct.

The runner does not show the application’s network request

cy.request() performs a direct request initiated by the test. If the behavior you need to inspect is traffic initiated by the application, set up cy.intercept() to observe, wait on, or stub that traffic.

The browser closes before you can inspect a CLI run

Run with --headed --no-exit --browser chrome. The --headed flag makes the browser visible, and --no-exit keeps Cypress open after the spec.

No automatic failure screenshot appears after using open mode

Automatic failure screenshots are part of cypress run, not cypress open. For an artifact produced by a run, execute the spec with npx cypress run.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Or skip the browser setup

If you need a website screenshot rather than an interactive Cypress test runner, ScreenshotNeo takes one with a GET request. For example, save a capture of a site as WebP:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo documentation for request options. Before capture, it accepts cookie/consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo and get 1,000 free screenshots a month with no card.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.