Leveraging the cypress chainable command within an if/else statement

Question

Leveraging the cypress chainable command within an if/else statement

Can anyone offer guidance on how to incorporate chainable commands with if/else logic without duplicating code? Specifically, I want to avoid repeating

.trigger('focus', {force: true}).click({force: true});

in both the if and else statements. I have tried using return in the logic but it's not working as expected.

    const selectedOption = 'I am option'
    cy.get('.my-selector')
      .contains(selectedOption)
      .scrollIntoView()
      .then(($option) => {
        if ($option.find('input').length === 1) {
          cy.wrap($option.find('input')).trigger('focus', {force: true}).click({force: true});
        } else {
          cy.wrap($option).trigger('focus', {force: true}).click({force: true});
        }
      });

utilizing return

      .then(($option) => {
        if ($option.find('input').length === 1) {
          return cy.wrap($option.find('input'));
        }

typescript cypress

Answer 1

Answer №1

If you want to retrieve the correct target, consider creating a helper function for that,

const getTarget = ($el) => {
  const $input = $el.find('input');
  return $input.length ? $input : $el;
}

cy.get('.my-selector')
  .contains(selectedOption)
  .scrollIntoView()
  .then(($option) => {
    cy.wrap(getTarget($option)).trigger('focus', {force: true}).click({force: true});
  });

// alternative syntax

cy.get('.my-selector')
  .contains(selectedOption)
  .scrollIntoView()
  .then($option => getTarget($option))
  .trigger('focus', {force: true}).click({force: true});

Alternatively, you can achieve this with a custom command

Cypress.Commands.add('optionTarget', { prevSubject: true }, (subject) => {
  const $input = subject.find('input');
  return $input.length ? $input : subject;
})

cy.get('.my-selector')
  .contains(selectedOption)
  .scrollIntoView()
  .optionTarget().trigger('focus', {force: true}).click({force: true});

Answer 2

If you want to retrieve the correct target, consider creating a helper function for that,

const getTarget = ($el) => {
  const $input = $el.find('input');
  return $input.length ? $input : $el;
}

cy.get('.my-selector')
  .contains(selectedOption)
  .scrollIntoView()
  .then(($option) => {
    cy.wrap(getTarget($option)).trigger('focus', {force: true}).click({force: true});
  });

// alternative syntax

cy.get('.my-selector')
  .contains(selectedOption)
  .scrollIntoView()
  .then($option => getTarget($option))
  .trigger('focus', {force: true}).click({force: true});

Alternatively, you can achieve this with a custom command

Cypress.Commands.add('optionTarget', { prevSubject: true }, (subject) => {
  const $input = subject.find('input');
  return $input.length ? $input : subject;
})

cy.get('.my-selector')
  .contains(selectedOption)
  .scrollIntoView()
  .optionTarget().trigger('focus', {force: true}).click({force: true});

Leveraging the cypress chainable command within an if/else statement

Answer №1

Similar questions

Challenges encountered while deploying a NextJS project with TypeScript on Vercel

TypeScript encountering difficulty in locating types within @types

The state of dynamically created Angular components is not being preserved

Unclear nicknames within the Vite monorepository

Introducing the 'node' type in tsconfig leads to errors in type definitions

Implement functionality in Angular to perform tasks when the page is reloaded

Guide to incorporating a Crypto chart widget using Angular 11

Prisma - Modify a single resource with additional criteria

Encountering issues while incorporating decimal.js in TypeScript

In order for Angular jQuery click events to properly function, they must be triggered by a

Do not directly change a prop's value as it will be replaced when the parent component re-renders. Use v-form instead

Issue with Firebase Functions trigger not activating

Definition of Promise resolve type in Visual Code's d.ts file

A similar functionality to the async pipe in TypeScript

I'm having trouble grasping the concept of 'globals' in TypeScript/NodeJS and distinguishing their differences. Can someone explain it to me?

The functionality of two-way data binding seems to be failing in Angular 2

The variable "this.data" in Angular 2 is experiencing the issue

The attribute 'tableName' is not found within the 'Model' type

Having trouble capturing emitted events from a child component in Angular 2+?

What is the correct way to utilize Global Variables in programming?