it blocks for test cases in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a test block using Cypress.

Cypress

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

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

Aopens the browser

Bchecks the homepage loads

Cruns the test

Dstarts the server

Attempts:

3 left

💡 Hint

Common Mistakes

Using a vague or unrelated string inside the it block

Leaving the it block description empty

The it block describes what the test does. Here, it should say what is being checked, like 'checks the homepage loads'.

2fill in blank

medium

Complete the code to visit a URL inside an it block.

Cypress

it('visits the page', () => {
  cy.[1]('https://example.com')
})

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

Avisit

Bclick

Cget

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.click() instead of cy.visit()

Using cy.get() which selects elements, not pages

The cy.visit() command loads a webpage in Cypress tests.

3fill in blank

hard

Fix the error in the it block to correctly check the page title.

Cypress

it('checks the title', () => {
  cy.title().[1]('eq', 'Example Domain')
})

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

Aclick

Bget

Cvisit

Dshould

Attempts:

3 left

💡 Hint

Common Mistakes

Using get which selects elements, not assertions

Using visit or click which are unrelated here

The should command is used to make assertions in Cypress.

4fill in blank

hard

Fill both blanks to select an element and check its text.

Cypress

it('checks header text', () => {
  cy.[1]('h1').[2]('contain', 'Welcome')
})

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

Aget

Bshould

Cclick

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using click instead of get

Using visit instead of should

cy.get() selects the element, and should('contain', ...) asserts its text.

5fill in blank

hard

Fill all three blanks to write a test that types into an input and checks its value.

Cypress

it('types in input and checks value', () => {
  cy.[1]('input[name="username"]').[2]('user123')
  cy.[3]('input[name="username"]').should('have.value', 'user123')
})

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

Aget

Binvoke

Ctype

Attempts:

3 left

💡 Hint

Common Mistakes

Using invoke instead of type

Not selecting the element before typing

Use get to select the input, type to enter text, and get again to select for assertion.

Practice

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

easy

A. To define reusable functions for tests

B. To group multiple test suites together

C. To hold and describe a single test case with its steps

D. To configure the Cypress environment settings

Solution

1. Step 1: Understand the role of it blocks

   it blocks are used to write individual test cases in Cypress.

2. Step 2: Differentiate from other blocks

   Unlike describe which groups tests, it holds one test with steps and description.

3. Final Answer:

   To hold and describe a single test case with its steps -> Option C

4. Quick Check:

   it block = single test case [OK]

Hint: Remember: it means 'this test' [OK]

Common Mistakes:

• Confusing it with describe
• Thinking it configures environment
• Using it to group multiple tests

2. Which of the following is the correct syntax to write an it block in Cypress?

easy

A. it('checks title') => cy.title().should('include', 'Home')

B. it 'checks title' { cy.title().should('include', 'Home') }

C. it: 'checks title' => { cy.title().should('include', 'Home') }

D. it('checks title', () => { cy.title().should('include', 'Home') })

Solution

1. Step 1: Check the function call syntax

   The it block requires a string description and a callback function wrapped in parentheses.

2. Step 2: Validate arrow function and braces

   it('checks title', () => { cy.title().should('include', 'Home') }) correctly uses arrow function with braces and parentheses.

3. Final Answer:

   it('checks title', () => { cy.title().should('include', 'Home') }) -> Option D

4. Quick Check:

   Correct it syntax uses parentheses and arrow function [OK]

Hint: Use parentheses and arrow function for it [OK]

Common Mistakes:

• Omitting parentheses around parameters
• Using colon or wrong arrow syntax
• Missing braces for function body

3. What will be the result of running this Cypress test?

it('checks page title', () => { cy.visit('https://example.com'); cy.title().should('eq', 'Example Domain'); });

medium

A. Test fails because cy.visit is missing a callback

B. Test passes if the page title is exactly 'Example Domain'

C. Test throws a syntax error due to missing semicolon

D. Test passes regardless of the page title

Solution

1. Step 1: Analyze the test steps

   The test visits 'https://example.com' and checks if the page title equals 'Example Domain'.

2. Step 2: Understand assertion behavior

   The assertion should('eq', 'Example Domain') passes only if the title matches exactly.

3. Final Answer:

   Test passes if the page title is exactly 'Example Domain' -> Option B

4. Quick Check:

   Correct assertion = test passes if title matches [OK]

Hint: Check exact match with should('eq', ...) [OK]

Common Mistakes:

• Assuming cy.visit needs a callback
• Ignoring assertion conditions
• Confusing semicolons with syntax errors

4. Identify the error in this it block:

it('checks button', () => { cy.get('#submit').click() cy.get('#message').should('be.visible') })

medium

A. No error; the test will run correctly

B. Missing semicolon after click() causes syntax error

C. The it block is missing a description string

D. The selector #submit is invalid

Solution

1. Step 1: Check syntax for semicolons

   JavaScript allows optional semicolons; missing one here does not cause error.

2. Step 2: Verify test structure and selectors

   The it block has a description and valid selectors; no syntax or logic errors.

3. Final Answer:

   No error; the test will run correctly -> Option A

4. Quick Check:

   Missing semicolons often allowed; test runs fine [OK]

Hint: Semicolons optional in JS; focus on logic errors [OK]

Common Mistakes:

• Assuming missing semicolon always causes error
• Confusing missing description with error
• Thinking selectors are invalid without context

5. You want to write two it blocks to test login and logout separately. Which is the best practice?

hard

A. Write two it blocks inside one describe block, each with clear descriptions

B. Write both tests inside a single it block to save time

C. Write it blocks without descriptions to keep code short

D. Use multiple describe blocks but only one it block

Solution

1. Step 1: Understand test organization

   Each it block should hold one test case with a clear description.

2. Step 2: Group related tests

   Using one describe block to group login and logout tests keeps tests organized and readable.

3. Final Answer:

   Write two it blocks inside one describe block, each with clear descriptions -> Option A

4. Quick Check:

   Separate tests in it blocks grouped by describe [OK]

Hint: Group tests with describe, separate with it [OK]

Common Mistakes:

• Combining multiple tests in one it block
• Skipping descriptions for it blocks
• Using multiple describe blocks unnecessarily