How to use getRunWebpackSpan 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.

You can also use this Cypress plugin meanwhile Cypress does not support this feature natively: https://www.npmjs.com/package/cypress-fail-fast

Add the plugin to devDependencies:

npm i --save-dev cypress-fail-fast

Inside cypress/plugins/index.js:

module.exports = (on, config) => {
  require("cypress-fail-fast/plugin")(on, config);
  return config;
};

At the top of cypress/support/index.js:

import "cypress-fail-fast";

For me, it is better to transform the big json before testing.

The response has this nesting

{
  data: {
    count: 252655,
    aggregations: {
      "filters.bodyTypes": {
         doc_count_error_upper_bound: 0,
         sum_other_doc_count: 0,
         buckets: [
           {
             key: "Station wagon",
             doc_count: 45778,
           },

but that makes the test code harder to figure out.

Start by pulling out the aggregations with this function

(response) => {
  return response.body.data.aggregations['filters.bodyTypes'].buckets
}

You can then check things like the number of bodyTypes

cy.request({
  method: 'POST',
  ...
})
.then(response => {
  return response.body.data.aggregations['filters.bodyTypes'].buckets
})
.then(bodyTypeObjects => {
  expect(bodyTypeObjects.length).to.eq(90)
})

To check individual items, you need to deconstruct the bodyTypeObjects, e.g

const match = Cypress._.filter(bodyTypeObjects, Cypress._.matches({key: 'Station Wagon'}))
expect(match).to.have.length(1)

but to make the test code simpler, do another transform from this shape

[{key: 'Station wagon', doc_count: 45778}, {key: 'SUV', doc_count: 30188}, ...] 

to this shape

{ Station wagon: 45778, SUV: 30188, ... }

Then the tests become a lot simpler

Full test

cy.request({
  method: 'POST',
  ...
})
.then(response => {
  return response.body.data.aggregations['filters.bodyTypes'].buckets
})
.then(bodyTypeObjects => {

  expect(bodyTypeObjects.length).to.eq(90)

  const bodyTypeCounts = bodyTypeObjects.reduce((acc, bodyTypeObject) => {
    acc[bodyTypeObject.key] = bodyTypeObject.doc_count
    return acc
  }, {})
  return bodyTypeCounts
})
.then(bodyTypeCounts => {

  expect(bodyTypeCounts).to.have.property('Station Wagon')
  expect(bodyTypeCounts['Station Wagon']).to.be.gt(1000)

  // OR

  cy.wrap(bodyTypeCounts)
    .should('have.property', 'Station Wagon', 1673)

})

For text comparison, instead of using OR approach, I suggest using lowercase comparison by having the expected text and actual text to be compared in the lowercase version. This is a cleaner approach.

cy.get(element).invoke('text').should(text => {
  expect(text.toLowerCase()).to.contain(search_word.toLowerCase());
})

another alternative is using regex

cy.get(element).invoke('text').should('match', /(h|H)ot/);

I think strategies #1 & #2 rely on the browser remembering credentials and supplying them to the login page, as happens with the Stackoverflow page - you don't have to log in every time you visit.

The main difference is you have used cy.visit() instead of cy.request() as shown in the recipes.

If you still are not able to successfully grab the token, try using your login with cy.session(). It will only call the login function once per session.

/*
  Enable use of cy.session() and new behavior to handle caching 
  and restoring cookies, localStorage, and sessionStorage.
*/
Cypress.config('experimentalSessionSupport', true)

describe('...', () => {

  beforeEach(() => {
    cy.session(() => {
      login.loginCredentials(Cypress.env('userEmail'), Cypress.env('userPass')) 
    })
  })

  it('try to get csrf token', () => {
    cy.getCookie('YII_CSRF_TOKEN')
      .then((c) => {
        cy.log(c.value)
      })
  })
})

You can write something like:

cy.request({
  body: {},
  failOnStatusCode: false,
}).then((res) => {
  if (res.status == 404) {
    cy.log(JSON.stringify(res.body)) //prints the response body
    cy.log(res.body.name) //prints name
    cy.log(res.body.message) //prints message
  } else {
    //Do Something else
  }
})

The jQuery .index() method is useful here

Search for a given element from among the matched elements

cy.contains('table thead th', 'Contact')
  .then($th => $th.index())
  .then(contactIndex => {
    cy.get('table tbody td').eq(contactIndex).should('contain', 'Maria Anders')
  })

Yes, it looks like there is a good attempt to create a scenario recorder and it works to a great extent:

https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb/related?hl=en

Your commands file would have a command like this. Note that this will log the cy.wraps and you may want to pass log: false to suppress that if you choose. You can also add another agrument and have an if block for text to use data-testid with .contains()

Cypress.Commands.add(
  'byTestId',
  { prevSubject: 'optional' },
  (subject, id) => {
    if (subject) {
      return cy.wrap(subject).find(`[data-testid="${id}"]`)
    }
    return cy.get(`[data-testid="${id}"]`)
  },
)

This would be an application of the command.

cy.byTestId('first-id')
  // maybe some assertions here for visibility check
  .byTestId('id-inside-first-element')
  // maybe some assertions here for visibility check
  .byTestId('id-within-this-second-element')