it blocks for test cases in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested it blocks in Cypress

Consider this Cypress test code snippet:

describe('My Test Suite', () => {
  it('Test case 1', () => {
    cy.visit('https://example.com')
  })

  it('Test case 2', () => {
    it('Nested test case', () => {
      cy.get('h1').should('be.visible')
    })
  })
})

What will happen when you run this test suite?

Cypress

describe('My Test Suite', () => {
  it('Test case 1', () => {
    cy.visit('https://example.com')
  })

  it('Test case 2', () => {
    it('Nested test case', () => {
      cy.get('h1').should('be.visible')
    })
  })
})

A Only 'Test case 1' will run; the others will be ignored silently.

B Both 'Test case 2' and 'Nested test case' will run sequentially without errors.

C 'Nested test case' will run but 'Test case 2' will be skipped.

D The test runner will throw an error because nesting it blocks is not allowed.

💡 Hint

Think about how Cypress structures test cases and the role of it blocks.

Cypress does not allow it blocks to be nested inside other it blocks. Nesting causes the test runner to throw an error because it defines a test case and cannot contain other test cases.

❓ assertion

intermediate

Correct assertion placement in it blocks

Which of the following is the correct way to write an assertion inside an it block in Cypress?

A it('checks title', () => { cy.title().should('eq', 'My Page') })

B it('checks title', () => { cy.title().then(title => { expect(title).to.eq('My Page') }) })

C it('checks title', () => { expect(cy.title()).to.eq('My Page') })

D it('checks title', () => { cy.title().should('equal', 'My Page') })

💡 Hint

Remember how Cypress commands and assertions work asynchronously.

Option A uses Cypress's built-in should assertion correctly on the cy.title() command. Option A works but is more verbose. Option A is incorrect because cy.title() returns a chainable, not the title string directly. Option A uses equal, which performs loose (==) equality, instead of the strict eq (===).

🔧 Debug

advanced

Debugging skipped tests inside it blocks

You have this Cypress test suite:

describe('Suite', () => {
  it.skip('skipped test', () => {
    cy.visit('https://example.com')
  })

  it('normal test', () => {
    cy.visit('https://example.com')
  })
})

What will be the result when running this suite?

Cypress

describe('Suite', () => {
  it.skip('skipped test', () => {
    cy.visit('https://example.com')
  })

  it('normal test', () => {
    cy.visit('https://example.com')
  })
})

A Neither test runs because one test is skipped.

B Both tests run normally without skipping.

C Only 'normal test' runs; 'skipped test' is ignored and marked as skipped in the report.

D The test runner throws an error because of the skip keyword.

💡 Hint

Think about the purpose of it.skip in Cypress.

The it.skip marks a test to be skipped. The test runner will not execute it but will show it as skipped in the test report. Other tests run normally.

🧠 Conceptual

advanced

Purpose of it blocks in Cypress

What is the main purpose of an it block in Cypress testing?

A To group multiple test suites together.

B To define a single test case that Cypress will execute.

C To set up preconditions before running tests.

D To clean up after all tests have run.

💡 Hint

Think about what you want Cypress to do step-by-step.

The it block defines a single test case. Cypress runs each it block as an individual test. Grouping multiple tests is done with describe. Setup and cleanup use before, after, beforeEach, and afterEach.

❓ framework

expert

Handling asynchronous commands inside it blocks

Consider this Cypress test:

it('checks element text', () => {
  let textContent = ''
  cy.get('#my-element').then(el => {
    textContent = el.text()
  })
  expect(textContent).to.equal('Hello')
})

What will be the result of this test?

Cypress

it('checks element text', () => {
  let textContent = ''
  cy.get('#my-element').then(el => {
    textContent = el.text()
  })
  expect(textContent).to.equal('Hello')
})

A The test will fail because the expect runs before the textContent is set.

B The test will pass because textContent is set correctly before the assertion.

C The test will throw a syntax error due to incorrect use of then.

D The test will be skipped because of asynchronous commands.

💡 Hint

Remember how Cypress commands run asynchronously and how JavaScript handles promises.

The expect assertion runs immediately after the cy.get command is queued, but before the then callback executes. So, textContent is still an empty string when expect runs, causing the test to fail.