API-first setup pattern in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to send a GET request to the API endpoint.

Cypress

cy.request('[1]').then((response) => {
  expect(response.status).to.eq(200)
})

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

A'/api/users'

B'GET /api/users'

C'/users/api'

D'api/users'

Attempts:

3 left

💡 Hint

Common Mistakes

Including the HTTP method in the URL string.

Omitting the leading slash in the URL path.

The cy.request command requires the URL path as a string. The correct endpoint is '/api/users'.

2fill in blank

medium

Complete the code to set up a POST request with JSON body in the API-first test.

Cypress

cy.request({
  method: 'POST',
  url: '/api/users',
  [1]: { name: 'Alice' }
}).then((response) => {
  expect(response.status).to.eq(201)
})

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

Adata

Bpayload

Cbody

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using data or payload instead of body.

Omitting the data property entirely.

The cy.request command uses the body property to send JSON data in the request.

3fill in blank

hard

Fix the error in the assertion to check the response body contains the user name.

Cypress

cy.request('/api/users/1').then((response) => {
  expect(response.body.[1]).to.eq('Alice')
})

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

AuserName

Busername

Cuser

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like username or userName.

Assuming nested objects without checking the API response.

The API response body contains the property name for the user's name, so the assertion should check response.body.name.

4fill in blank

hard

Fill both blanks to create a setup function that creates a user via API and stores the user ID.

Cypress

function setupUser() {
  return cy.request({
    method: 'POST',
    url: '/api/users',
    [1]: { name: 'Bob' }
  }).then((response) => {
    const userId = response.body.[2];
    return userId;
  });
}

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

Abody

Bid

CuserId

Dpayload

Attempts:

3 left

💡 Hint

Common Mistakes

Using payload instead of body.

Accessing a non-existent property like userId in the response.

The request data is sent in the body property, and the API returns the new user's ID in response.body.id.

5fill in blank

hard

Fill all three blanks to write a test that sets up a user, then verifies the user exists via GET request.

Cypress

it('creates and verifies a user', () => {
  setupUser().then(([1]) => {
    cy.request('/api/users/' + [2]).then((response) => {
      expect(response.body.[3]).to.eq('Bob')
    })
  })
})

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

AuserId

Cname

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently.

Checking the wrong property in the response body.

The setupUser function returns the userId, which is used to request the user data. The response body contains the name property to verify.