Dual commands in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress dual command chaining?

Consider the following Cypress test code. What will be the text content of the element after the commands run?

Cypress

cy.get('#message').invoke('text').then(text => {
  cy.get('#message').should('contain.text', text);
});

A The test fails because 'should' cannot be used after 'then'.

B The test passes if the element with id 'message' contains its own text content.

C The test passes but the text content is always empty.

D The test fails because 'invoke' cannot be chained with 'then'.

💡 Hint

Remember that Cypress commands are asynchronous and 'then' waits for the previous command to resolve.

The code gets the text of the element with id 'message' and then asserts that the element contains that text. This is a valid dual command chaining pattern in Cypress.

❓ assertion

intermediate

Which assertion correctly verifies the value after a dual command?

You want to check that an input field with id 'email' has the value '[e-mail]' using Cypress dual commands. Which assertion is correct?

Cypress

cy.get('#email').invoke('val').then(value => {
  // assertion here
});

A expect(value).to.contain('[e-mail]');

B assert.equal(value, '[e-mail]');

C expect(value).to.equal('[e-mail]');

D assert.isTrue(value === '[e-mail]');

💡 Hint

Use the most direct equality assertion for exact value matching.

The 'expect' assertion with 'to.equal' checks exact equality, which is appropriate here. 'to.contain' would allow partial matches, which is not precise enough.

🔧 Debug

advanced

Why does this Cypress dual command fail to find the element?

Examine the code below. Why does the test fail with 'Timed out retrying: Expected to find element: #submit, but never found it.'?

Cypress

cy.get('#form').then(form => {
  cy.wrap(form).find('#submit').click();
});

A Because 'then' yields a jQuery element, but 'find' must be called on Cypress chainable, so the selector is not found.

B Because 'find' is not a Cypress command and cannot be chained after 'wrap'.

C Because '#submit' does not exist inside '#form' at the time of the test.

D Because 'click' cannot be called inside a 'then' callback.

💡 Hint

Remember the difference between jQuery elements and Cypress chainables.

Inside 'then', 'form' is a jQuery element, but 'find' is a Cypress command that works on Cypress chainables. Using 'cy.wrap(form).find()' returns a Cypress chainable, but if the element is not found, it times out. The failure is due to timing or selector context.

❓ framework

advanced

How does Cypress handle dual commands internally to avoid race conditions?

Which mechanism does Cypress use internally to ensure dual commands like 'get' and 'then' run in the correct order without race conditions?

A Cypress queues commands and executes them sequentially, waiting for each to finish before starting the next.

B Cypress runs all commands in parallel and merges results asynchronously.

C Cypress uses JavaScript Promises but does not queue commands, relying on user callbacks.

D Cypress executes commands immediately without waiting, causing possible race conditions.

💡 Hint

Think about how Cypress manages command execution flow.

Cypress maintains an internal command queue and runs commands one after another, ensuring each command completes before the next starts. This prevents race conditions and makes test execution predictable.

🧠 Conceptual

expert

What is the main advantage of using dual commands in Cypress tests?

Why do Cypress tests often use dual commands like 'cy.get().then()' instead of just chaining commands directly?

A Dual commands are required to use assertions inside Cypress tests.

B Dual commands run commands in parallel to speed up tests.

C Dual commands disable automatic retries to improve test speed.

D Dual commands allow access to the yielded subject for custom logic while preserving Cypress's automatic retries and chaining.

💡 Hint

Consider how Cypress handles asynchronous commands and user callbacks.

Using 'then' after a Cypress command allows you to work with the yielded subject directly in a callback, enabling custom logic while still benefiting from Cypress's automatic retries and command queue. This is the main advantage of dual commands.

Practice

1. What is the main benefit of using dual commands in Cypress tests?

easy

A. They enable writing tests without any selectors.

B. They allow running tests in parallel on multiple browsers.

C. They combine finding and acting on elements in one step.

D. They automatically generate test reports after each test.

Solution

1. Step 1: Understand dual commands concept

   Dual commands in Cypress combine locating an element and performing an action on it in a single step.

2. Step 2: Compare options with concept

   Only They combine finding and acting on elements in one step. correctly describes this benefit. Other options describe unrelated features.

3. Final Answer:

   They combine finding and acting on elements in one step. -> Option C

4. Quick Check:

   Dual commands = find + act [OK]

Hint: Dual commands = find element + act in one step [OK]

Common Mistakes:

• Confusing dual commands with parallel test execution
• Thinking dual commands generate reports automatically
• Believing dual commands remove need for selectors

2. Which of the following is the correct syntax to click a button with id submitBtn using a dual command in Cypress?

easy

A. cy.click('#submitBtn')

B. cy.get('#submitBtn').click()

C. cy.find('#submitBtn').click()

D. cy.click().get('#submitBtn')

Solution

1. Step 1: Identify correct dual command syntax

   In Cypress, cy.get(selector).click() finds the element and clicks it in one chain.

2. Step 2: Check each option

   cy.get('#submitBtn').click() uses correct chaining. cy.click('#submitBtn') and D have invalid command order. cy.find('#submitBtn').click() uses find which is not a root command.

3. Final Answer:

   cy.get('#submitBtn').click() -> Option B

4. Quick Check:

   Use cy.get(selector).click() [OK]

Hint: Use cy.get(selector).click() to find and click [OK]

Common Mistakes:

• Using cy.click(selector) which is invalid
• Using cy.find() as root command instead of cy.get()
• Reversing command order like cy.click().get()

3. What will be the result of this Cypress code snippet?

cy.get('.input-field').type('Hello').should('have.value', 'Hello')

medium

A. The test will fail because type does not return the element.

B. The test will fail because should cannot be chained after type.

C. The test will throw a syntax error due to missing semicolons.

D. The test will pass because type types text and should asserts the value.

Solution

1. Step 1: Understand chaining of dual commands

   In Cypress, type() types text into the element and returns the element for further chaining.

2. Step 2: Analyze the assertion

   The should('have.value', 'Hello') checks if the input's value is 'Hello', which is correct after typing.

3. Final Answer:

   The test will pass because type types text and should asserts the value. -> Option D

4. Quick Check:

   type() returns element, so should() works [OK]

Hint: type() returns element; can chain should() for assertions [OK]

Common Mistakes:

• Thinking type() breaks the chain
• Believing should() can't follow type()
• Confusing syntax errors with missing semicolons

4. Identify the error in this Cypress code using dual commands:

cy.get('.checkbox').check('#checkbox1')

medium

A. The check command should not have a selector argument.

B. The get command is missing a closing parenthesis.

C. The selector '.checkbox' is invalid for check command.

D. The check command must be chained after click.

Solution

1. Step 1: Review Cypress check command usage

   The check() command acts on the element found by get() and does not take any selector argument.

2. Step 2: Analyze the code snippet

   Here, check('#checkbox1') incorrectly passes a selector, causing an error.

3. Final Answer:

   The check command should not have a selector argument. -> Option A

4. Quick Check:

   check() acts on found element, no selector inside [OK]

Hint: check() acts on found element; no selector inside [OK]

Common Mistakes:

• Passing selector inside check()
• Missing parentheses in get()
• Thinking check() must follow click()

5. You want to fill a form with multiple fields using dual commands efficiently. Which approach is best to type 'John' into input with id firstName and 'Doe' into input with id lastName in Cypress?

hard

A. cy.get('#firstName').type('John').get('#lastName').type('Doe');

B. cy.get('#firstName').type('John'); cy.get('#lastName').type('Doe');

C. cy.get('#firstName, #lastName').type('John', 'Doe');

D. cy.type('#firstName', 'John').type('#lastName', 'Doe');

Solution

1. Step 1: Understand chaining dual commands for multiple fields

   Using chaining, you can find first element, type, then find second element and type again in one chain.

2. Step 2: Evaluate each option

   cy.get('#firstName').type('John'); cy.get('#lastName').type('Doe'); works but uses two separate commands, not chaining. cy.get('#firstName, #lastName').type('John', 'Doe'); tries to type into two selectors at once, which is invalid. cy.get('#firstName').type('John').get('#lastName').type('Doe'); chains get and type commands correctly. cy.type('#firstName', 'John').type('#lastName', 'Doe'); uses invalid cy.type syntax.

3. Final Answer:

   cy.get('#firstName').type('John').get('#lastName').type('Doe'); -> Option A

4. Quick Check:

   Chain get().type().get().type() for multiple fields [OK]

Hint: Chain get().type() for each field to fill multiple inputs [OK]

Common Mistakes:

• Trying to type into multiple selectors at once
• Using invalid cy.type() command
• Not chaining commands for efficiency