Programmatic login (cy.request) in Cypress - Test Execution Trace

Execution Trace Quiz - 3 Questions

What is the main purpose of using cy.request in this test?

A To click the login button on the page

B To send a direct HTTP request to the login API without using the UI

C To fill and submit the login form fields

D To wait for the dashboard page to load

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