Dual commands in Cypress - Build an Automation Script

Verify login and logout functionality using dual commands

Preconditions (2)

Step 1: Enter 'testuser' in the username input field with id 'username'

Step 2: Enter 'Password123!' in the password input field with id 'password'

Step 3: Click the login button with id 'loginBtn'

Step 4: Verify that the URL changes to '/dashboard'

Step 5: Click the logout button with id 'logoutBtn'

Step 6: Verify that the URL changes back to '/login'

✅ Expected Result: User successfully logs in and is redirected to dashboard, then logs out and is redirected back to login page

Automation Requirements - Cypress

Assertions Needed:

URL should be '/dashboard' after login

URL should be '/login' after logout

Best Practices:

Use Cypress dual commands chaining for actions and assertions

Use clear and stable selectors (id selectors)

Avoid arbitrary waits; rely on Cypress automatic waits

Use descriptive test and step names

Automated Solution

Cypress

describe('Login and Logout flow using dual commands', () => {
  it('should login and logout successfully', () => {
    cy.visit('/login')
      .get('#username').type('testuser')
      .get('#password').type('Password123!')
      .get('#loginBtn').click()
      .url().should('include', '/dashboard')
      .get('#logoutBtn').click()
      .url().should('include', '/login')
  })
})

This test uses Cypress dual commands chaining to perform actions and assertions in a smooth flow.

First, it visits the login page, then types the username and password using get().type(). Next, it clicks the login button and asserts the URL includes '/dashboard' to confirm successful login.

Then it clicks the logout button and asserts the URL includes '/login' to confirm successful logout.

Using chaining keeps the code clean and readable. Cypress automatically waits for elements to be ready, so no explicit waits are needed.

Common Mistakes - 3 Pitfalls

Using multiple separate cy.get() commands without chaining

Using arbitrary waits like cy.wait(5000)

Using unstable selectors like XPath or complex CSS selectors

Bonus Challenge

Now add data-driven testing with 3 different sets of valid usernames and passwords

Show Hint

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