Cypress E2E Demo UI & API Test Automation

A comprehensive Cypress test automation framework demonstrating real-world UI testing against demoqa.com and REST API testing against the Petstore and DemoQA Bookstore APIs.

Built as a companion project for cy2play a CLI tool that converts Cypress tests to Playwright.

---

What's Inside

UI Tests (35 tests across 10 spec files)

All UI tests run against the live demoqa.com website.

Spec File	Tests	Cypress Features Demonstrated
text-box.cy.ts	3	cy.fixture(), .type(), .clear(), .should(), form submit
check-box.cy.ts	3	Tree widget expand/collapse, checkbox toggle, nested selection
radio-button.cy.ts	3	Custom radio buttons, .click() on labels, .should('be.disabled')
web-tables.cy.ts	5	Table CRUD (add/edit/delete), search filtering, modal forms
buttons.cy.ts	3	.dblclick(), .rightclick(), cy.contains() with regex
alerts.cy.ts	4	cy.on('window:alert'), cy.on('window:confirm'), cy.stub(win, 'prompt')
modal-dialogs.cy.ts	2	Bootstrap modal open/close, .should('not.exist')
practice-form.cy.ts	2	Date picker, React Select dropdown, .selectFile(), .within(), autocomplete
browser-windows.cy.ts	2	cy.stub(win, 'open') for new tab/window verification
widgets.cy.ts	8	Accordion, tabs, <select> (single + multi), progress bar, tooltips (.trigger('mouseover')), range slider (nativeInputValueSetter)

API Tests (15 tests across 2 spec files)

Spec File	Tests	What's Tested
petstore.cy.ts	10	Pet CRUD POST, GET, PUT, DELETE, findByStatus. Store place/get/delete order, inventory
bookstore.cy.ts	5	List books, create user, generate auth token, verify authorization, delete user

Cypress Commands & Patterns Used

• Navigation: cy.visit(), URL assertions with cy.url() / .toHaveURL()
• Selectors: cy.get(), cy.contains(), .first(), .nth(), .filter()
• Actions: .type(), .clear(), .click(), .dblclick(), .rightclick(), .check(), .select(), .selectFile(), .scrollIntoView(), .trigger()
• Assertions: .should('be.visible'), .should('have.text'), .should('contain.text'), .should('have.value'), .should('have.class'), .should('have.length'), .should('not.exist'), .should('be.disabled')
• Fixtures: cy.fixture() for test data
• File Upload: .selectFile() with fixture files
• Scoping: .within() for element-scoped assertions
• Window/Stubs: cy.window(), cy.stub(), cy.on('window:alert'), cy.on('window:confirm')
• API Testing: cy.request() with GET, POST, PUT, DELETE, status code assertions, response body validation, failOnStatusCode: false
• Custom Commands: cy.removeAds() strips ad overlays and fixed banners that block element interactions on demoqa.com

---

Getting Started

Prerequisites

• Node.js 18+ (download)
• Git (download)

Installation

# Clone the repo
git clone https://github.com/barispe/cypressDemo.git
cd cypressDemo

# Install dependencies
npm install

Running Tests

# Run all tests (headless)
npx cypress run

# Run only UI tests
npx cypress run --spec "cypress/e2e/ui/**"

# Run only API tests
npx cypress run --spec "cypress/e2e/api/**"

# Run a single spec
npx cypress run --spec "cypress/e2e/ui/practice-form.cy.ts"

# Open Cypress interactive runner (headed)
npx cypress open

---

Project Structure

cypressDemo/
 cypress.config.ts               # Cypress config (baseUrl, timeouts, viewport)
 tsconfig.json                    # TypeScript config
 package.json
 cypress/
    e2e/
       ui/                      # 10 UI test specs
          text-box.cy.ts
          check-box.cy.ts
          radio-button.cy.ts
          web-tables.cy.ts
          buttons.cy.ts
          alerts.cy.ts
          modal-dialogs.cy.ts
          practice-form.cy.ts
          browser-windows.cy.ts
          widgets.cy.ts
       api/                     # 2 API test specs
           petstore.cy.ts
           bookstore.cy.ts
    support/
       e2e.ts                   # Global hooks & exception handling
       commands.ts              # Custom commands (removeAds)
    fixtures/
        user.json                # Test data for text-box
        sample.txt               # File for upload testing

---

Configuration

Key settings in cypress.config.ts:

Setting	Value	Purpose
baseUrl	https://demoqa.com	All cy.visit() paths are relative to this
chromeWebSecurity	false	Allows cross-origin requests (needed for API tests)
viewportWidth	1280	Standard desktop viewport
defaultCommandTimeout	10000	10s timeout for element commands (demoqa can be slow)
experimentalModifyObstructiveThirdPartyCode	true	Handles third-party scripts that interfere with tests

---

Related

• cy2play Convert these Cypress tests to Playwright automatically
• demoqa.com The QA practice site used for UI tests
• Petstore API Swagger Petstore used for API tests

---

Test Results

 All specs passed!    03:00    50 tests    50 passing    0 failing

   api/bookstore.cy.ts           5 passing
   api/petstore.cy.ts           10 passing
   ui/alerts.cy.ts               4 passing
   ui/browser-windows.cy.ts      2 passing
   ui/buttons.cy.ts              3 passing
   ui/check-box.cy.ts            3 passing
   ui/modal-dialogs.cy.ts        2 passing
   ui/practice-form.cy.ts        2 passing
   ui/radio-button.cy.ts         3 passing
   ui/text-box.cy.ts             3 passing
   ui/web-tables.cy.ts           5 passing
   ui/widgets.cy.ts              8 passing

---

License

MIT