Dual commands in Cypress - Test Execution Trace

Test Overview

This test demonstrates using dual commands in Cypress to find an input box, type text, and then verify the typed value.

Test Code - Cypress

Cypress

describe('Dual commands test', () => {
  it('types text and verifies input value', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-email')
      .type('[e-mail]')
      .should('have.value', '[e-mail]')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	—	PASS
2	Browser opens	Browser window opened, ready to navigate	—	PASS
3	Navigates to 'https://example.cypress.io/commands/actions'	Page loaded with form containing input fields	Page URL is correct	PASS
4	Finds element with class '.action-email'	Input box for email is visible and enabled	Element exists and is visible	PASS
5	Types '[e-mail]' into the input box	Input box now contains text '[e-mail]'	Input value updated correctly	PASS
6	Checks that input box has value '[e-mail]'	Input box value is '[e-mail]'	Value matches expected text	PASS

Failure Scenario

Failing Condition: The input element with class '.action-email' is not found or not visible

Execution Trace Quiz - 3 Questions

What does the command cy.get('.action-email') do in this test?

A Checks the input value

B Types text into the input box

C Finds the input element with class 'action-email'

D Navigates to the page

Key Result

Using dual commands in Cypress allows chaining actions and assertions on the same element, making tests concise and readable.

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