Dual commands in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to chain two Cypress commands correctly.

Cypress

cy.get('button').[1]()

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

Avisit

Btype

Cshould

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using type on a button element causes an error.

Using visit is for navigating to a URL, not clicking.

The click command is used to simulate a click on the button element selected by cy.get.

2fill in blank

medium

Complete the code to assert the button contains the correct text.

Cypress

cy.get('button').[1]('contain.text', 'Submit')

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

Ashould

Btype

Ccontains

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using contains as a chained command after cy.get is incorrect here.

Using click does not check text content.

The should command is used to make assertions about the element's state or content.

3fill in blank

hard

Fix the error in chaining commands to type text and then assert the input value.

Cypress

cy.get('input').[1]('Hello').should('have.value', 'Hello')

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

Aclick

Bcontains

Ctype

Dselect

Attempts:

3 left

💡 Hint

Common Mistakes

Using click does not input text.

Using contains is for finding elements, not typing.

The type command inputs text into the input field before asserting its value.

4fill in blank

hard

Fill both blanks to chain commands that select a dropdown option and then verify the selected value.

Cypress

cy.get('select').[1]('Option1').[2]('have.value', 'Option1')

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

Aselect

Bshould

Cclick

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using click on a select element does not select an option.

Using type is not appropriate for dropdowns.

The select command chooses the dropdown option, and should asserts the selected value.

5fill in blank

hard

Fill all three blanks to chain commands that find a checkbox, check it, and assert it is checked.

Cypress

cy.get('input[type=checkbox]').[1]().[2]('be.checked').[3]('exist')

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

Acheck

Bshould

Cand

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using check without parentheses causes syntax errors.

Not chaining assertions properly leads to test failures.

The check command checks the checkbox, should asserts it is checked, and and chains another assertion that it exists.

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