Token-based authentication in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the Authorization header with the token.

Cypress

cy.request({ method: 'GET', url: '/api/data', headers: { Authorization: 'Bearer [1]' } })

Drag options to blanks, or click blank then click option'

AaccessToken

Btoken

CauthToken

DsessionId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not hold the token.

Forgetting to prefix the token with 'Bearer '.

The Authorization header should include the access token, commonly named 'accessToken'.

2fill in blank

medium

Complete the code to save the token from the login response.

Cypress

cy.request('POST', '/api/login', { username: 'user', password: 'pass' }).then((response) => { cy.wrap(response.body.[1]).as('accessToken') })

Drag options to blanks, or click blank then click option'

Atoken

BsessionToken

CauthToken

Daccess_token

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect key names that do not exist in the response.

Not saving the token for later use.

The token is usually returned in the response body under the key 'access_token'.

3fill in blank

hard

Fix the error in the code to correctly use the saved token in the header.

Cypress

cy.get('@accessToken').then(([1]) => { cy.request({ method: 'GET', url: '/api/profile', headers: { Authorization: `Bearer ${token}` } }) })

Drag options to blanks, or click blank then click option'

Atoken

BaccessToken

CauthToken

DsessionToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name inside the callback than declared.

Not using template literals correctly.

The variable name in the callback must match the one used inside the function, here 'accessToken'.

4fill in blank

hard

Fill both blanks to create a test that logs in and uses the token to get user data.

Cypress

cy.request('POST', '/api/login', { username: 'user', password: 'pass' }).then((response) => { const [1] = response.body.access_token; cy.request({ method: 'GET', url: '/api/user', headers: { Authorization: `[2] ${accessToken}` } }) })

Drag options to blanks, or click blank then click option'

AaccessToken

BBearer

CToken

DAuthorization

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for the token.

Missing the 'Bearer' prefix in the header.

The token is saved as 'accessToken' and the header must start with 'Bearer ' before the token.

5fill in blank

hard

Fill all three blanks to store the token, set it in headers, and assert the response status.

Cypress

cy.request('POST', '/api/login', { username: 'user', password: 'pass' }).then((response) => { const [1] = response.body.access_token; cy.request({ method: 'GET', url: '/api/dashboard', headers: { Authorization: `[2] ${accessToken}` } }).then((res) => { expect(res.status).to.equal([3]) }) })

Drag options to blanks, or click blank then click option'

AaccessToken

BBearer

C200

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names.

Omitting 'Bearer' in the header.

Asserting wrong status codes.

The token is saved as 'accessToken', the header uses 'Bearer', and the expected status code for success is 200.

Practice

1. What is the main advantage of using token-based authentication in Cypress tests?

easy

A. It disables all API requests during testing.

B. It requires manual input of username and password every time.

C. It automatically generates UI elements for login.

D. It allows tests to log in quickly without interacting with the UI.

Solution

1. Step 1: Understand token-based authentication purpose

   Token-based authentication lets tests bypass UI login by using tokens directly.

2. Step 2: Compare options

   Only It allows tests to log in quickly without interacting with the UI. correctly states the advantage of faster login without UI interaction.

3. Final Answer:

   It allows tests to log in quickly without interacting with the UI. -> Option D

4. Quick Check:

   Token-based authentication = Fast login without UI [OK]

Hint: Token-based auth skips UI login for faster tests [OK]

Common Mistakes:

• Thinking token auth requires UI interaction
• Confusing token auth with disabling APIs
• Assuming token auth auto-generates UI

2. Which Cypress command is commonly used to request an authentication token from an API?

easy

A. cy.visit()

B. cy.get()

C. cy.request()

D. cy.contains()

Solution

1. Step 1: Identify command for API calls

   cy.request() is used to make HTTP requests to APIs, including login endpoints.

2. Step 2: Eliminate other commands

   cy.visit() loads pages, cy.get() selects DOM elements, cy.contains() finds text; none request tokens.

3. Final Answer:

   cy.request() -> Option C

4. Quick Check:

   API token request = cy.request() [OK]

Hint: Use cy.request() to call APIs and get tokens [OK]

Common Mistakes:

• Using cy.visit() to get tokens
• Confusing cy.get() with API calls
• Trying cy.contains() for authentication

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

let token = '';
cy.request('POST', '/api/login', { username: 'user', password: 'pass' })
  .then((response) => {
    token = response.body.token;
  });

medium

A. An empty string because token is declared outside the callback

B. The token string returned by the API in response.body.token

C. Undefined because response.body.token does not exist

D. The entire response object

Solution

1. Step 1: Understand asynchronous assignment

   The token variable is assigned inside the .then() callback after the API response arrives.

2. Step 2: Confirm token value after request

   response.body.token contains the token string from the API, so token gets that value.

3. Final Answer:

   The token string returned by the API in response.body.token -> Option B

4. Quick Check:

   token = response.body.token string [OK]

Hint: Token is set inside .then() from response.body.token [OK]

Common Mistakes:

• Assuming token stays empty due to async
• Thinking token is undefined without checking API
• Confusing token with full response object

4. Identify the error in this Cypress test snippet for token-based login:

cy.request('POST', '/api/login', { username: 'user', password: 'pass' })
  .then((response) => {
    cy.setCookie('authToken', response.token);
  });

medium

A. response.token should be response.body.token to access the token

B. cy.setCookie is not a valid Cypress command

C. The request method should be GET, not POST

D. Cookies cannot store authentication tokens

Solution

1. Step 1: Check response object structure

   The token is usually inside response.body.token, not directly response.token.

2. Step 2: Validate cy.setCookie usage

   cy.setCookie is a valid command to set cookies in Cypress.

3. Final Answer:

   response.token should be response.body.token to access the token -> Option A

4. Quick Check:

   Access token via response.body.token [OK]

Hint: Use response.body.token, not response.token [OK]

Common Mistakes:

• Using response.token instead of response.body.token
• Thinking cy.setCookie is invalid
• Changing POST to GET incorrectly

5. You want to write a Cypress test that logs in using token-based authentication and then visits a protected page. Which sequence correctly achieves this?

A) cy.request('POST', '/api/login', {username: 'user', password: 'pass'}).then(res => {
  cy.setCookie('token', res.token);
});
cy.visit('/protected');

B) cy.visit('/protected');
cy.request('POST', '/api/login', {username: 'user', password: 'pass'}).then(res => {
  cy.setCookie('token', res.body.token);
});

C) cy.request('POST', '/api/login', {username: 'user', password: 'pass'}).then(res => {
  cy.setCookie('token', res.body.token);
  cy.visit('/protected');
});

D) cy.setCookie('token', 'dummy');
cy.visit('/protected');

hard

A. Set dummy token cookie, then visit protected page

B. Visit protected page first, then request token and set cookie

C. Request token, set cookie, then visit protected page outside .then()

D. Request token, set cookie, then visit protected page inside .then() callback

Solution

1. Step 1: Understand asynchronous flow

   Token must be set before visiting the protected page, so visit must happen after setting cookie inside .then().

2. Step 2: Analyze options

   Request token, set cookie, then visit protected page inside .then() callback sets cookie and visits page inside .then(), ensuring correct order and token availability.

3. Final Answer:

   Request token, set cookie, then visit protected page inside .then() callback -> Option A

4. Quick Check:

   Set token cookie before visiting page inside .then() [OK]

Hint: Visit protected page only after setting token cookie inside .then() [OK]

Common Mistakes:

• Visiting page before setting token cookie
• Setting cookie outside async callback
• Using dummy tokens without real login