How to use validateStaticResponse method in Cypress

You can do it by using Vue's $emit() rather than Cypress' .trigger().

First you need a reference to the player on window.

I also added a data variable 'progress' to test the concept, you will have different test criteria.

Vue component

<vimeo-player 
  :video-id='block.content.id' 
  @ended='updateProgress' 
  ref="player" />                // add a ref so we can get to the element

data() {
  return {
    ...
    progress: 'atStart'  // just for confirming the event fired
  }
},

mounted() {
  if (window.Cypress) {   // only when testing
    window.vuePlayer = this;
  }
},

methods: {
  ...
  updateProgress () {
    this.progress = 'atEnd'
  },
}

spec

cy.window().its('vuePlayer').then(myVueComponent => {

  const vueVimeoPlayerComponent = myVueComponent.$refs.player; 
  vueVimeoPlayerComponent.$emit('ended')

  // run test here, e.g
  console.log('testing', myVueComponent.progress)  // === 'atEnd'
})

Note, I turned autoplay off so that only the spec's emit triggers the event.

If I understand correctly, you are looking for

cy.get('a[href="..."]')

Similarly

cy.get('img[src="..."]')

where you should add the appropriate text instead of ...

Of course, follow with .should('be.visible').

If you want to use a partial match, you can use

cy.get('img[src$="bottle.png"]')  // NOTE src$= 

The basic problem is in getText(selector, variable) the 2nd param you want to give a value is passed in "by value", but to set and use later it would need to be passed "by reference".

If you "pass by value", setting the variable has no effect outside of the function.

See Pass variables by reference in JavaScript for some background.

It's not possible to pass "by reference" in javascript, but you can wrap in a container object and modify properties

function getText(selector, container, variableName) {
  selector.invoke('text')
    .then(($text) => {
      container[variableName] = $text.trim()
    })
}

it('the UI...', () => {

  const container = {       // Note const because container never changes
    listItem1: null,        // only properties will change
    listItem2: null
  }

  cy.get('someTab').click().then(() => {
    cy.getText(cy.get('someSelector').first(), container, 'listItem1')
    cy.getText(cy.get('someSelector').last(), container, 'listItem2')
  }).then(() => {
    cy.get('someSelector').first().click()
    cy.get('someSelector').last().click()
    cy.get('someButton').click()
  }).then(() => {
    cy.log(container.listItem1); // listItem1 is visible
    cy.log(container.listItem2); // listItem2 is visible
    cy.get('span[data-app]').should('contain', container.listItem1)  
    cy.get('span[data-app]').should('contain', container.listItem2) 
  })
})

You can change getText() to a custom command

const container = {}

Cypress.Commands.add('storeAs', { prevSubject: true }, function(subject, prop) {
  cy.wrap(subject)
    .invoke('text')
    .then(text => container[prop] = text)
})

it('the UI...', () => {

  cy.get('someTab').click().then(() => {
    cy.get("someSelector").first().storeAs('listItem1')
    cy.get("someSelector").last().storeAs('listItem2')
  }).then(() => {
    ...
  }).then(() => {
    cy.log(container.listItem1); // listItem1 is visible
    cy.log(container.listItem2); // listItem2 is visible
    cy.get('span[data-app]').should('contain', container.listItem1)  
    cy.get('span[data-app]').should('contain', container.listItem2) 
  })
})

One explanation might be that options is sometimes empty when the .click() is attempted, due to loading latency.

Try adding a length check

cy.get(".ng-option")
  .should("be.visible")
  .should('have.length','gt', 0)
  .then((options) => {
    Cypress._.sample(options).click();
  })
cy.get(".ng-option").should("not.exist")

Converting to an array

The problem is options is an object, not an array.

If you console.log(options) you'll see it has a couple of extra properties prevObject and selector which are sometimes selected by the randon function.

jQuery.fn.init(2) [option, option, prevObject: jQuery.fn.init(1), selector: '.ng-option']

But these properties do not support the .click() function, and are not what you want to select anyway.

To fix, first convert the options object to an array

cy.get(".ng-option")
  .should("be.visible")
  .should('have.length','gt', 0)
  .then((options) => {
    const optionsArray = [...options]
    Cypress._.sample(optionsArray).click();
  })
cy.get(".ng-option").should("not.exist")

It's a problem with Cypress, some commands "yield" many elements and some only one element.

You can check the the contains() - Yields section of the command, this one only gives you one element, which will be the .first() in the list.

.contains() yields the new DOM element it found.

IMO the docs should be more explicit. You learn to pick it up with experience, but can waste a lot of time trying to hack about with what looks like legit commands.

Try .get() and .filter(), using jQuery pseudo-selector :contains() which return all matching elements

cy.get('a')
  .filter(':contains(test@test5.com)')  
  .last()

or add the pseudo-selector :contains() inside the .get()

cy.get('a:contains(test@test5.com)')
  .last()

Try this:

cy.window().its('Meteor');

This will wait until the Meteor property exists on the window object.

Or, if you want to do something with the Meteor property once it exists, use .then():

cy.window().its('Meteor').then(meteor => {
    console.log(meteor);
    // do things
});

.its() will attempt to get a property from the object wrapped by Cypress, in this case the window object, and will retry until the property exists or the command times out.

2022 here and tested with cypress version: "6.x.x" until "10.x.x"

You could use { force: true } like:

cy.get("YOUR_SELECTOR").click({ force: true });

but this might not solve it ! The problem might be more complex, that's why check below

My solution:

cy.get("YOUR_SELECTOR").trigger("click");

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

cy.get("YOUR_SELECTOR").trigger("click");

And it worked ????

Hope this will fix your issue or at least help you debug and understand what's wrong.

it('Testing picture uploading', () => {
    cy.fixture('testPicture.png').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        });
    });
});

Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload

Note: testPicture.png must be in fixture folder of cypress

You can use the alternate 'contains' command,

cy.contains('#feed_header_id', 'אביזרי');

The reason is that cy.get(...).contains(...) does not wait for async content.

The get() part has automatic retry, but the id selector is hard-coded in your html, so get() succeeds immediately (before the xhr returns it's value), then the element is tested for content (which is initially empty).

The alternate syntax above applies auto-retry to both the selector and the content.

Here is a quick test I used to ensure it is not due to RTL language features.

Spec - contains-rtl.js

describe('contains', () => {
  it('waits for content', () => {
    cy.visit('app/hebrew-calendar.html').then(x => console.log('x', x))
    // cy.get('h1#feed_header_id').contains('כ״ט בְּאִיָּר תשע״א');
    cy.contains('h1#feed_header_id', 'כ״ט בְּאִיָּר תשע״א');
  })
})

Sample page - hebrew-calendar.html

<h1 id="feed_header_id"></h1>

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.hebcal.com/converter/?cfg=json&gy=2011&gm=6&gd=2&g2h=1', true);

  xhr.onload = function () {
    const hebrewDate = JSON.parse(xhr.response).hebrew;
    const el = document.querySelector('h1#feed_header_id');
    el.textContent = hebrewDate;
  };

  xhr.send(null);
</script>