expect() for BDD assertions in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ assertion

intermediate

Check if element contains exact text using expect()

You want to verify that a button with id #submitBtn contains the exact text Submit. Which assertion using expect() is correct?

Cypress

cy.get('#submitBtn').then(($btn) => {
  const text = $btn.text();
  // Which expect assertion is correct?
});

A expect(text).to.include('Submit')

B expect(text).to.contain('submit')

C expect(text).to.equal('Submit')

D expect(text).to.have.text('Submit')

💡 Hint

Use to.equal() for exact match of strings.

to.equal() checks for exact equality. to.include() and to.contain() check for substring presence. to.have.text() is not a valid Chai assertion.

❓ Predict Output

intermediate

Output of expect() assertion on array length

What is the result of this Cypress test snippet?

const items = ['apple', 'banana', 'cherry'];
expect(items).to.have.length(3);

Cypress

const items = ['apple', 'banana', 'cherry'];
expect(items).to.have.length(3);

A Test fails with length mismatch error

B Test passes successfully

C SyntaxError due to wrong assertion syntax

D TypeError because items is not a DOM element

💡 Hint

Arrays have a length property that can be asserted.

The assertion to.have.length(3) correctly checks the array length. No errors occur.

🔧 Debug

advanced

Identify the error in this expect() assertion

What error will this Cypress assertion produce?

cy.get('.alert').then(($el) => {
  expect($el.textContent).to.include('Error');
});

Cypress

cy.get('.alert').then(($el) => {
  expect($el.textContent).to.include('Error');
});

A Test passes successfully

B AssertionError: text does not include 'Error'

C SyntaxError due to missing parentheses

D TypeError: $el.textContent is not a function or property

💡 Hint

Check how to get text content from a jQuery element.

$el.textContent does not exist on a jQuery object (use $el.text()). It is undefined, causing a TypeError.

🧠 Conceptual

advanced

Understanding chaining with expect() in Cypress

Which statement about chaining assertions with expect() in Cypress is correct?

A You can chain multiple assertions like <code>expect(value).to.be.a('string').and.to.include('test')</code>

B You must use separate <code>expect()</code> calls for each assertion

C Chaining multiple <code>expect()</code> calls on the same value is not allowed

D Chaining works only with <code>should()</code>, not with <code>expect()</code>

💡 Hint

Chai assertions support chaining with and.

expect() returns an assertion object that supports chaining with and for multiple checks on the same value.

❓ framework

expert

Best practice for asynchronous expect() assertions in Cypress

Consider this Cypress test:

cy.get('#status').then(($el) => {
  expect($el.text()).to.equal('Loaded');
});

What is the best practice to ensure the assertion waits for the element text to become 'Loaded' before checking?

A Use <code>cy.get('#status').should('have.text', 'Loaded')</code> instead of <code>expect()</code> inside <code>then()</code>

B Add a <code>cy.wait(5000)</code> before the <code>expect()</code> call

C Use <code>expect()</code> inside <code>then()</code> without changes; Cypress handles waiting automatically

D Wrap the <code>expect()</code> call inside a <code>setTimeout</code> with delay

💡 Hint

Use Cypress built-in retry-ability for assertions.

should() retries the assertion until it passes or times out, making tests more reliable. Using expect() inside then() runs only once and may fail if the text is not ready.

Practice

1. What is the main purpose of using expect() in Cypress tests?

easy

A. To log messages in the console

B. To run the test suite faster

C. To select elements on the page

D. To check if the actual value matches the expected value

Solution

1. Step 1: Understand the role of expect()

   expect() is used to compare actual results with expected results in tests.

2. Step 2: Identify the correct purpose

   It helps verify if the app behaves as expected by checking values.

3. Final Answer:

   To check if the actual value matches the expected value -> Option D

4. Quick Check:

   expect() compares values [OK]

Hint: Remember: expect() checks actual vs expected values [OK]

Common Mistakes:

• Thinking expect() runs tests
• Confusing expect() with element selectors
• Using expect() to log messages

2. Which of the following is the correct syntax to assert that a variable count equals 5 using expect() in Cypress?

easy

A. expect(count).to.equal(5);

B. expect(count).toBe(5);

C. expect(count).equals(5);

D. expect(count).is(5);

Solution

1. Step 1: Recall Cypress BDD assertion syntax

   Cypress uses Chai assertions where to.equal() checks equality.

2. Step 2: Identify the correct syntax

   expect(count).to.equal(5); is the correct way to assert equality.

3. Final Answer:

   expect(count).to.equal(5); -> Option A

4. Quick Check:

   Use to.equal() for equality [OK]

Hint: Use to.equal() for equality checks in Cypress [OK]

Common Mistakes:

• Using toBe() which is Jest syntax
• Using equals() without to
• Using is() which is invalid

3. What will be the result of this Cypress assertion?

const title = 'Welcome';
expect(title).to.have.length(7);

medium

A. Test passes because 'Welcome' has 7 characters

B. Test fails because length is checked incorrectly

C. Syntax error due to wrong method

D. Test passes but length is 6

Solution

1. Step 1: Check the string length

   The string 'Welcome' has exactly 7 characters.

2. Step 2: Understand the assertion

   to.have.length(7) correctly asserts the string length is 7.

3. Final Answer:

   Test passes because 'Welcome' has 7 characters -> Option A

4. Quick Check:

   String length 7 matches assertion [OK]

Hint: Count characters to verify length assertions [OK]

Common Mistakes:

• Assuming length counts words, not characters
• Confusing length with array length
• Using wrong assertion method

4. Identify the error in this Cypress assertion:

expect(user.name).to.equals('Alice');

medium

A. Missing parentheses after user.name

B. Incorrect method name; should be to.equal

C. Should use expect(user).to.equal('Alice')

D. No error; assertion is correct

Solution

1. Step 1: Check the assertion method

   The correct Chai assertion method is to.equal, not to.equals.

2. Step 2: Confirm syntax correctness

   Using to.equals causes a runtime error because it is not defined.

3. Final Answer:

   Incorrect method name; should be to.equal -> Option B

4. Quick Check:

   Use to.equal, not to.equals [OK]

Hint: Remember: method is to.equal, not to.equals [OK]

Common Mistakes:

• Using to.equals instead of to.equal
• Confusing property access syntax
• Assuming expect needs parentheses after property

5. You want to check that an array items contains the string 'apple' using expect(). Which assertion correctly tests this?

hard

A. expect(items).to.equal('apple');

B. expect(items).to.have.length('apple');

C. expect(items).to.include('apple');

D. expect(items).to.contain.length('apple');

Solution

1. Step 1: Understand the goal

   You want to check if 'apple' is inside the array items.

2. Step 2: Choose the correct assertion

   to.include('apple') checks if the array contains that element.

3. Final Answer:

   expect(items).to.include('apple'); -> Option C

4. Quick Check:

   Use to.include() to check array contents [OK]

Hint: Use to.include() to check if array has an item [OK]

Common Mistakes:

• Using to.equal() which checks full equality
• Using length assertions incorrectly
• Combining contain and length wrongly