Why Programmatic login (cy.request) in Cypress? - Purpose & Use Cases

The Big Idea

What if you could skip the boring login steps and test faster with just one line of code?

The Scenario

Imagine you have to test a website that requires logging in before you can check anything. Every time you want to test, you open the browser, type your username and password, click login, and wait for the page to load.

This feels like waiting in a long line at a busy store just to get inside.

The Problem

Doing this login step manually for every test is slow and boring. It wastes time and can cause mistakes if you mistype your password or click the wrong button.

Also, if the login page changes, all your tests break and you have to fix them one by one.

The Solution

Programmatic login with cy.request lets you skip the slow login page. Instead, you send a quick background request to log in, like using a fast pass to get inside the store.

This makes your tests faster, more reliable, and easier to maintain.

Before vs After

✗ Before

cy.visit('/login')
cy.get('#username').type('user')
cy.get('#password').type('pass')
cy.get('button[type=submit]').click()

✓ After

cy.request('POST', '/api/login', { username: 'user', password: 'pass' })
cy.visit('/dashboard')

What It Enables

It enables fast, stable tests by logging in behind the scenes without waiting for the login page.

Real Life Example

When testing an online store, you can quickly log in programmatically and jump straight to testing the shopping cart or checkout process without wasting time on the login screen every time.

Key Takeaways

Manual login in tests is slow and error-prone.

Programmatic login with cy.request speeds up tests.

This approach makes tests more reliable and easier to maintain.

Practice

1. What is the main benefit of using cy.request for programmatic login in Cypress?

easy

A. It logs in faster by skipping the UI steps.

B. It visually shows the login process in the browser.

C. It requires manual input of username and password each time.

D. It disables cookies to improve security.

Solution

1. Step 1: Understand what cy.request does

   cy.request sends HTTP requests directly without interacting with the UI.

2. Step 2: Identify the benefit in login context

   By using cy.request for login, tests skip slow UI steps and run faster.

3. Final Answer:

   It logs in faster by skipping the UI steps. -> Option A

4. Quick Check:

   Programmatic login = faster login without UI [OK]

Hint: Programmatic login skips UI, making tests faster [OK]

Common Mistakes:

• Thinking cy.request shows UI login
• Assuming manual input is needed every time
• Believing cookies are disabled automatically

2. Which of the following is the correct syntax to perform a POST login request using cy.request in Cypress?

easy

A. cy.request('GET', '/login', { username: 'user', password: 'pass' })

B. cy.request('/login', 'POST', { username: 'user', password: 'pass' })

C. cy.request({ url: '/login', method: 'GET', body: { username: 'user', password: 'pass' } })

D. cy.request('POST', '/login', { username: 'user', password: 'pass' })

Solution

1. Step 1: Recall cy.request method signature

   The correct order is cy.request(method, url, body) for POST requests.

2. Step 2: Check each option

   cy.request('POST', '/login', { username: 'user', password: 'pass' }) matches the correct syntax with method 'POST', URL '/login', and body object.

3. Final Answer:

   cy.request('POST', '/login', { username: 'user', password: 'pass' }) -> Option D

4. Quick Check:

   Method first, then URL, then body [OK]

Hint: Remember: method, URL, then body in cy.request [OK]

Common Mistakes:

• Swapping method and URL order
• Using GET instead of POST for login
• Passing body with GET method

3. Given the following code snippet, what will be the value of token after the test runs?

cy.request('POST', '/api/login', { username: 'test', password: '1234' })
  .then((response) => {
    const token = response.body.token
    cy.wrap(token).as('authToken')
  })

medium

A. Undefined, because token is declared inside the callback only.

B. The token string returned from the login API response body.

C. An error because cy.wrap cannot be used inside then.

D. The entire response object instead of just the token.

Solution

1. Step 1: Understand cy.request and then callback

   The then receives the response object from the POST request.

2. Step 2: Extract token from response.body.token

   The code assigns token to the token string from the response body and saves it as an alias.

3. Final Answer:

   The token string returned from the login API response body. -> Option B

4. Quick Check:

   Response body token is saved as alias [OK]

Hint: Response body holds token; alias saves it for later [OK]

Common Mistakes:

• Thinking token is undefined outside callback
• Believing cy.wrap cannot be used inside then
• Confusing response object with token string

4. You wrote this code to login programmatically but your test fails because the session is not preserved:

cy.request('POST', '/login', { username: 'user', password: 'pass' })
cy.visit('/dashboard')

What is the most likely reason?

medium

A. You forgot to save and set the authentication cookie or token after login.

B. The cy.visit command must come before cy.request.

C. The login API endpoint does not support POST requests.

D. You need to add cy.wait() between the commands.

Solution

1. Step 1: Understand session preservation in Cypress

   After login via cy.request, you must save cookies or tokens to keep the session.

2. Step 2: Identify missing step in code

   The code does not save or set any authentication cookie or token before visiting the dashboard.

3. Final Answer:

   You forgot to save and set the authentication cookie or token after login. -> Option A

4. Quick Check:

   Session needs saved cookie/token after login [OK]

Hint: Save auth cookie/token after login to keep session [OK]

Common Mistakes:

• Assuming cy.visit order matters here
• Thinking login API rejects POST requests
• Adding unnecessary waits instead of fixing session

5. You want to create a reusable Cypress command for programmatic login that stores the token and sets it as a cookie for later tests. Which code snippet correctly achieves this?

hard

A. Cypress.Commands.add('login', () => {
cy.request('GET', '/api/login')
.then((res) => {
cy.setCookie('authToken', res.body.token)
})
})

B. Cypress.Commands.add('login', () => {
cy.visit('/login')
cy.get('#username').type('user')
cy.get('#password').type('pass')
cy.get('button[type=submit]').click()
})

C. Cypress.Commands.add('login', () => {
cy.request('POST', '/api/login', { username: 'user', password: 'pass' })
.then((res) => {
cy.setCookie('authToken', res.body.token)
})
})

D. Cypress.Commands.add('login', () => {
cy.request('POST', '/api/login', { user: 'user', pass: 'pass' })
.then((res) => {
cy.setCookie('authToken', res.body.token)
})
})

Solution

1. Step 1: Check HTTP method and payload correctness

   Login usually requires POST with correct keys; Cypress.Commands.add('login', () => { cy.request('POST', '/api/login', { username: 'user', password: 'pass' }) .then((res) => { cy.setCookie('authToken', res.body.token) }) }) uses 'username' and 'password' correctly.

2. Step 2: Verify token storage and cookie setting

   Cypress.Commands.add('login', () => { cy.request('POST', '/api/login', { username: 'user', password: 'pass' }) .then((res) => { cy.setCookie('authToken', res.body.token) }) }) sets the cookie 'authToken' with the token from response body, enabling session reuse.

3. Step 3: Review other options for errors

   Cypress.Commands.add('login', () => { cy.visit('/login') cy.get('#username').type('user') cy.get('#password').type('pass') cy.get('button[type=submit]').click() }) uses UI login, not programmatic. Cypress.Commands.add('login', () => { cy.request('GET', '/api/login') .then((res) => { cy.setCookie('authToken', res.body.token) }) }) uses GET instead of POST. Cypress.Commands.add('login', () => { cy.request('POST', '/api/login', { user: 'user', pass: 'pass' }) .then((res) => { cy.setCookie('authToken', res.body.token) }) }) uses wrong keys 'user' and 'pass'.

4. Final Answer:

   Reusable command with POST request, correct keys, and cookie set. -> Option C

5. Quick Check:

   POST + correct keys + setCookie = reusable login [OK]

Hint: Use POST with correct keys and setCookie for token [OK]

Common Mistakes:

• Using GET instead of POST for login
• Wrong payload keys like 'user' instead of 'username'
• Trying UI login instead of programmatic
• Not setting cookie after login