How to use onChangeDifficulty method in Cypress

Your problem stems from the fact that cypress commands are not promises, although behaving like promises.

I can think of two options:

• Try to refactor your test code to not use async/await, as these commands don't behave as expected when running your code on cypress (check this bug). Cypress already has a whole way of dealing with async code as it creates a command queue that always run sequentially and in the expected order. That means you could observe the effects of your async code to validate that it happened before moving forward on your test. For instance, if User.createUserOnServer must wait a successful API call, add code to your test that will wait for the request to complete, using cy.server(), cy.route() and cy.wait(), like below:

  cy.server();
  cy.route('POST', '/users/').as('createUser');
  // do something to trigger your request here, like user.createOnServer()
  cy.wait('@createUser', { timeout: 10000});
  

• Use another third-party library that changes how cypress works with async/await, like cypress-promise. This lib may help you to treat cypress commands as promises that you can await in your before code (read more about it in this article).

If I understand correctly, these are XPath and selector equivalents (https://example.org/ happens to have a similar DOM structure):

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    const [elemByXPath] = await page.$x('//div[h1[contains(., "Example Domain")]]//a');

    const elemBySelector = await page.evaluateHandle(
      () => [...document.querySelectorAll('div')]
              .find(
                div => [...div.querySelectorAll('h1')]
                         .some(h1 => h1.innerText.includes('Example Domain'))
              )
              .querySelector('a')
    );

    console.log(elemByXPath.toString());
    console.log(elemBySelector.toString());

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

Try this:

cy.get('#twotabsearchtextbox').click().get('#searchDropdownBox').select('Books',{force: true})

The shorthand id selector #myid can only be used with the exact value, but id is still an attribute so you can use an attribute selector with a wildcard

cy.get('[id$="_2"]')         // $= means value ending with 

There's a bunch variations, see Selectors - Attribute

The other approach you tried should work like this

cy.get('div[data-collect-as="input"] input') 

This gets a child input with ancestor div[data-collect-as="input"] - the space denoting two separate elements and the relationship is ancestor -> descendant.

You can add more precision

cy.get('div[data-collect-as="input"] > div.wrp > input') 

where the > indicates a parent-child relationship.

These are not comparable, as each of them serve a different purpose.

From documentation of each of these libraries:

vue-test-utils

Vue Test Utils is the official unit testing utility library for Vue.js.

vue-jest

... To teach Jest how to process *.vue files, we will need to install and configure the vue-jest preprocessor.

cypress-vue-unit-test

A little helper to unit test Vue components in the open source Cypress.io E2E test runner

If you have no preference and looking for a place to start, then definitely start with official documentation: Choosing a test runner

It happens if during the click event the app removes the input and appends a new one at the end. Then your alias is invalid, because it points to an element no longer in the DOM.

If I move the element within the click handler, your code works.

If I clone the element within the click handler, your code fails.

What to do?

Refresh your alias after the click()

cy.get('input:checkbox').first().as('myCheckbox').then(() => {

  cy.get('@myCheckbox').should('be.checked').click()
    .then(() => cy.get('input:checkbox').last().as('myCheckbox'))  // it's last now!

  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')

  cy.get('@myCheckbox').should('not.be.checked').click()
    .then(() => cy.get('input:checkbox').last().as('myCheckbox'))

  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')

  cy.get('@myCheckbox').should('be.checked')
})

The alias command has another trick as well.

If the element is cloned and replaced, the original element becomes detached from DOM.

The cy.get('@alias') detects detached elements and replays the original command to automatically refresh.

It doesn't work with .first() because the element changes position.

But if you use a data-cy attribute instead of .first(), your code will work.

cy.get('input:checkbox[data-cy="first-checkbox"]')
  .as('myCheckbox').then(() => {

  cy.get('@myCheckbox')
    .should('be.checked').click()    // cloned and moved to another position

  ...

  cy.get('@myCheckbox')                 // detached by previous click
    .should('not.be.checked').click()   // so alias replays original get
                                        // with [data-cy="first-checkbox"]
  ...
  cy.get('@myCheckbox').should('be.checked')  // as above
})

Here's the Cypress code that does it

let { subject, alias, command } = aliasObj

const resolveAlias = () => {
  
  if ($dom.isElement(subject)) {          // if this is a DOM element

    const replay = () => {
      cy.replayCommandsFrom(command)
      return undefined
    }

    if ($dom.isDetached(subject)) {     // is it detached?

      subject = subject.filter((index, el) => $dom.isAttached(el))  // all detached?

      if (!subject.length) {
        return replay()                // perform the replay
      }
    }

Issue resolved by reverting back cypress version to 7.6.0.

You probably should use a request handler.

cy.intercept('pageUrl', (req) => { 
  req.destroy();
})

See the official doc here https://docs.cypress.io/api/commands/intercept#Controlling-the-response

I have the same issue and I found this solution. Hope it works for you:

• Add the following code to your cypress/support/commands.js file

Cypress.Commands.add('dragAndDrop', (subject, target) => {
    Cypress.log({
        name: 'DRAGNDROP',
        message: `Dragging element ${subject} to ${target}`,
        consoleProps: () => {
            return {
                subject: subject,
                target: target
            };
        }
    });
    const BUTTON_INDEX = 0;
    const SLOPPY_CLICK_THRESHOLD = 10;
    cy.get(target)
        .first()
        .then($target => {
            let coordsDrop = $target[0].getBoundingClientRect();
            cy.get(subject)
                .first()
                .then(subject => {
                    const coordsDrag = subject[0].getBoundingClientRect();
                    cy.wrap(subject)
                        .trigger('mousedown', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrag.x,
                            clientY: coordsDrag.y,
                            force: true
                        })
                        .trigger('mousemove', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrag.x + SLOPPY_CLICK_THRESHOLD,
                            clientY: coordsDrag.y,
                            force: true
                        });
                    cy.get('body')
                        .trigger('mousemove', {
                            button: BUTTON_INDEX,
                            clientX: coordsDrop.x,
                            clientY: coordsDrop.y,
                            force: true            
                        })
                        .trigger('mouseup');
                });
        });
});

• then you can do something like this in your test

describe('example to drag & drop in react web app', () => {
 it('drag & drop', () => {
   cy.visit(
     'https://react-beautiful-dnd.netlify.app/iframe.html?id=single-vertical-list--basic'
   )
   cy.get('[data-rbd-draggable-id="1"]').dragAndDrop(
     '[data-rbd-draggable-id="1"]',
     '[data-rbd-draggable-id="4"]'
   )
 })
})