Asserting response bodies in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to assert the response status is 200.

Cypress

cy.request('/api/data').then((response) => {
  expect(response.status).to.equal([1])
})

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

A200

B404

C500

D201

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 or 500 which mean errors.

Using 201 which means resource created, not general success.

The HTTP status code 200 means the request was successful. We assert that the response status equals 200.

2fill in blank

medium

Complete the code to assert the response body has a property 'name'.

Cypress

cy.request('/api/user').then((response) => {
  expect(response.body).to.have.[1]('name')
})

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

Akeys

Blength

Cinclude

Dproperty

Attempts:

3 left

💡 Hint

Common Mistakes

Using length which checks array length, not object keys.

Using include which checks for substring or array inclusion.

The property assertion checks if the object has a specific key. Here, we check if response.body has a 'name' property.

3fill in blank

hard

Fix the error in the assertion to check the response body equals the expected object.

Cypress

const expected = { id: 1, name: 'Alice' };
cy.request('/api/user/1').then((response) => {
  expect(response.body).to.[1](expected)
})

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

Adeep.equal

Bequals

Ceql

Dequal

Attempts:

3 left

💡 Hint

Common Mistakes

Using equal which compares object references, not content.

Using eql which is an alias but less explicit.

To compare objects deeply in Cypress, use deep.equal. It checks all nested properties for equality.

4fill in blank

hard

Fill both blanks to assert the response body array has length 3 and includes an object with id 2.

Cypress

cy.request('/api/items').then((response) => {
  expect(response.body).to.have.length[1];
  expect(response.body).to.deep.include([2]);
})

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

A(3)

B(2)

C{ id: 2 }

D[{ id: 2 }]

Attempts:

3 left

💡 Hint

Common Mistakes

Using length(2) which is the wrong size.

Using array brackets around the object in deep.include.

The length(3) assertion checks the array size. The deep.include checks if the array contains an object with id: 2.

5fill in blank

hard

Fill all three blanks to assert the response body has a nested property 'user.email' equal to '[e-mail]'.

Cypress

cy.request('/api/profile').then((response) => {
  expect(response.body).to.have.nested.[1]('[2]').that.equals([3])
})

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

Aproperty

Buser.email

C'[e-mail]'

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using length instead of property.

Not quoting the nested key or expected string properly.

Use have.nested.property('user.email') to check nested keys. Then assert it equals the expected email string.

Practice

1. What is the main purpose of asserting response bodies in Cypress tests?

easy

A. To check if the UI elements are visible on the page

B. To verify the server sends the correct data in the response body

C. To measure the page load time

D. To test the browser compatibility

Solution

1. Step 1: Understand response body assertion

   Asserting response bodies means checking the data returned by the server is correct and as expected.

2. Step 2: Identify the purpose in Cypress tests

   Cypress uses assertions on response bodies to confirm the server sends the right data, not UI or performance checks.

3. Final Answer:

   To verify the server sends the correct data in the response body -> Option B

4. Quick Check:

   Response body assertion = verify server data [OK]

Hint: Response body assertions check server data, not UI or speed [OK]

Common Mistakes:

• Confusing response body with UI element checks
• Thinking it measures performance
• Assuming it tests browser features

2. Which of the following is the correct syntax to assert that the response body has a property name equal to "John" in Cypress?

easy

A. cy.request('/api/user').expect('body.name').to.equal('John')

B. cy.request('/api/user').body.should('contain', 'name', 'John')

C. cy.request('/api/user').its('body').should('have.property', 'name', 'John')

D. cy.request('/api/user').should('body.name', 'John')

Solution

1. Step 1: Review Cypress chaining syntax

   In Cypress, cy.request() returns a response object. To assert a property in the body, use its('body') to access it.

2. Step 2: Use should('have.property', key, value) for assertion

   The correct way to check a property and its value is should('have.property', 'name', 'John').

3. Final Answer:

   cy.request('/api/user').its('body').should('have.property', 'name', 'John') -> Option C

4. Quick Check:

   Use its('body').should('have.property', key, value) [OK]

Hint: Use its('body').should('have.property', key, value) for body checks [OK]

Common Mistakes:

• Trying to access body directly without its()
• Using expect() incorrectly inside cy.request chain
• Wrong method names like expect() or body.should()

3. Given the following Cypress code, what will be the result of the assertion?

cy.request('/api/data').then((response) => {
  expect(response.status).to.eq(200)
  expect(response.body.items).to.have.length(3)
})

medium

A. The test passes if the response status is 200 and items array has exactly 3 elements

B. The test fails if the response status is 200 but items array has more than 3 elements

C. The test passes regardless of the items array length

D. The test fails if the response status is not 404

Solution

1. Step 1: Analyze the status code assertion

   The code expects response.status to equal 200, so the server must respond with HTTP 200.

2. Step 2: Analyze the items array length assertion

   The code expects response.body.items to have exactly 3 elements. If it has more or less, the test fails.

3. Final Answer:

   The test passes if the response status is 200 and items array has exactly 3 elements -> Option A

4. Quick Check:

   Status 200 and items length 3 = pass [OK]

Hint: Both status and body length must match exactly for pass [OK]

Common Mistakes:

• Ignoring the length check on items array
• Confusing status 200 with 404
• Assuming partial matches pass

4. Identify the error in this Cypress test code that asserts the response body property success is true:

cy.request('/api/submit').then((response) => {
  expect(response.body.success).to.be.true()
})

medium

A. The cy.request method is missing a URL

B. The property success does not exist in response.body

C. The then callback should use response.body.success()

D. The assertion should be to.be.true without parentheses

Solution

1. Step 1: Check the assertion syntax

   In Chai assertions used by Cypress, to.be.true is a property, not a function, so it should not have parentheses.

2. Step 2: Confirm other parts are correct

   The URL is provided, and accessing response.body.success is valid if the property exists.

3. Final Answer:

   The assertion should be to.be.true without parentheses -> Option D

4. Quick Check:

   Use to.be.true without () for boolean assertions [OK]

Hint: Boolean assertions use to.be.true without parentheses [OK]

Common Mistakes:

• Adding parentheses to boolean assertions
• Assuming success is a function
• Missing URL in cy.request

5. You want to assert that the response body contains a nested object with a user's id equal to 5 and a roles array containing "admin". Which Cypress assertion correctly checks both conditions?

hard

A. cy.request('/api/user/5').its('body').should((body) => {
expect(body.id).to.eq(5)
expect(body.roles).to.include('admin')
})

B. cy.request('/api/user/5').should('body.id', 5).and('body.roles', 'admin')

C. cy.request('/api/user/5').then((response) => {
expect(response.body.id).to.equal(5)
expect(response.body.roles).to.have.length(1)
})

D. cy.request('/api/user/5').its('body').should('have.property', 'id', 5).and('have.property', 'roles', 'admin')

Solution

1. Step 1: Understand nested assertions with callback

   Using should with a callback allows multiple assertions on the body object.

2. Step 2: Check each assertion correctness

   expect(body.id).to.eq(5) checks the id correctly. expect(body.roles).to.include('admin') checks the roles array contains 'admin'.

3. Step 3: Identify incorrect options

   cy.request('/api/user/5').should('body.id', 5).and('body.roles', 'admin') uses invalid chaining syntax. cy.request('/api/user/5').then((response) => { expect(response.body.id).to.equal(5) expect(response.body.roles).to.have.length(1) }) misses checking 'admin' in roles. cy.request('/api/user/5').its('body').should('have.property', 'id', 5).and('have.property', 'roles', 'admin') wrongly checks roles as a property equal to string 'admin'.

4. Final Answer:

   cy.request('/api/user/5').its('body').should((body) => { expect(body.id).to.eq(5) expect(body.roles).to.include('admin') }) -> Option A

5. Quick Check:

   Use callback in should for multiple nested assertions [OK]

Hint: Use should callback for multiple nested property checks [OK]

Common Mistakes:

• Trying to chain multiple properties incorrectly
• Checking array length instead of content
• Using have.property with array content as string