Programmatic login (cy.request) in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is cy.request used for in Cypress?

cy.request sends HTTP requests directly to the server without using the browser UI. It helps to perform actions like logging in faster and more reliably.

beginner

Why use programmatic login with cy.request instead of UI login?

Programmatic login is faster, avoids UI flakiness, and can bypass UI steps by directly authenticating with the server.

intermediate

What is a common step after cy.request for login to keep the session in Cypress?

Save the authentication token or cookie from the response and set it in the browser using cy.setCookie or localStorage before visiting pages.

beginner

Example: How to perform a POST login request with cy.request?

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

This sends login data to the server to authenticate.

intermediate

What should you check in the response of cy.request login?

Check the status code is 200 and the response contains the expected authentication token or cookie.

What does cy.request do in Cypress?

A Sends HTTP requests directly to the server

B Clicks buttons on the page

C Types text into input fields

D Takes screenshots

cy.request sends HTTP requests directly to the server without using the browser UI.

Why is programmatic login faster than UI login?

A It requires manual input

B It uses more clicks

C It reloads the page multiple times

D It skips UI rendering and interactions

Programmatic login skips UI steps, making it faster and less flaky.

After cy.request login, what should you do to keep the session?

A Set cookies or localStorage with auth data

B Reload the page

C Clear browser cache

D Close the browser

Setting cookies or localStorage keeps the session active for further tests.

Which HTTP method is commonly used with cy.request for login?

A GET

B POST

C DELETE

D PUT

POST is used to send login credentials securely to the server.

What status code indicates a successful login response?

A 302

B 404

C 200

D 500

Status code 200 means the request succeeded and login was successful.

Explain how to perform a programmatic login using cy.request in Cypress.

Think about how to replace manual UI login with direct server communication.

Why is programmatic login preferred in automated tests over UI login?

Consider the challenges of clicking and typing in UI tests.

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