How to use getNpmCommand method in Cypress

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 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.

Cypress uses minimatch to filter URLs. Accordingly, you need to specify **/customer/*.

• ** — feature known as globstar. Matches all files and zero or more directories and subdirectories. If followed by a /it matches only directories and subdirectories. To work that way it must be the only thing inside the path part e.g. /myapp/**.js will not work that way.
• * — Matches any string.

cy.server();
cy.route('GET','**/api/customer/*').as('GETCustomer);
...
cy.wait('@GETCustomer')
  .then((response) => {
     <your handler here>
   });

Check online here

To force an arbitrary loop, I create an array with the indices I want, and then call cy.wrap

var genArr = Array.from({length:15},(v,k)=>k+1)
cy.wrap(genArr).each((index) => {
    cy.get("#button-" + index).click()
})

GMaiolo's answer is fundamentally correct.

In case it should be helpful to anyone else, here is a quick function I made (based on GMaiolo's answer) to click on a specific point of a Vuetify v-slider:

// example usage: clickVSlider('#selectID input[role="slider"]', 0.25)

const clickVSlider = (sliderSelector, percentFromLeft) => {
  const sliderWidth = Cypress.$(sliderSelector).width()
  const sliderHeight = Cypress.$(sliderSelector).height()
  const pixelsFromLeft = percentFromLeft * sliderWidth
  const pixelsFromTop = 0.5 * sliderHeight
  cy.get(sliderSelector).click(pixelsFromLeft, pixelsFromTop)
}

Or, perhaps it is preferable to use a more 'composable function' style:

// example usage: cy.get('#selectID input[role="slider"]').then(clickVSlider(0.25))

const clickVSlider = percentFromLeft => subject => {
  const sliderWidth = subject.width()
  const sliderHeight = subject.height()
  const pixelsFromLeft = percentFromLeft * sliderWidth
  const pixelsFromTop = 0.5 * sliderHeight
  cy.wrap(subject).click(pixelsFromLeft, pixelsFromTop)
}

Alternatively, we can create a Cypress custom command, although we want to make sure we don't get too overzealous in the usage of custom commands:

// cypress/support/commands.js
// example usage: cy.get('#selectID input[role="slider"]').clickVSlider(0.25)

Cypress.Commands.add('clickVSlider', {prevSubject: true}, (subject, percentFromLeft) => {
  const sliderWidth = subject.width()
  const sliderHeight = subject.height()
  const pixelsFromLeft = percentFromLeft * sliderWidth
  const pixelsFromTop = 0.5 * sliderHeight
  cy.wrap(subject).click(pixelsFromLeft, pixelsFromTop)
})

If I make a minimal example app + test, it follows the rules you quoted above.

Test

it('overrides the intercept stub', () => {

  cy.visit('../app/intercept-override.html')
  
  cy.intercept('GET', 'someUrl', { statusCode: 200 })

  cy.get('button').click()

  cy.get('div')
    .invoke('text')
    .should('eq', '200')                               // passes

  cy.intercept('GET', 'someUrl', { statusCode: 404 })

  cy.get('button').click()

  cy.get('div')
    .invoke('text')
    .should('eq', '404')                               // passes
})

App

<button onclick="clicked()">Click</button>
<div>Result</div>
<script>
  function clicked() {
    fetch('someUrl').then(response => {
      const div = document.querySelector('div')
      div.innerText = response.status
    })
  }
</script>

So, what's different in your app?

Test revised according to comments

Main points that break the test

• unique aliases are needed
• the string-based url (2nd test) requires minimatch wildcard prefix ** to work

beforeEach(() => {
  cy.intercept('GET', /api\/test-id\/\d+/, { statusCode: 200 })
    .as('myalias1')
  cy.visit('../app/intercept-overide.html')
})

it('sees the intercept stub status 200', () => {
  cy.get('button').click()
  cy.wait('@myalias1')
  cy.get('div')
    .invoke('text')
    .should('eq', '200')
})

it('sees the intercept stub status 404', () => {
  cy.intercept('GET', '**/api/test-id/1', { statusCode: 404 })
    .as('myalias2')

  cy.get('button').click()
  cy.wait('@myalias2')
  cy.get('div')
    .invoke('text')
    .should('eq', '404')
})

App

<button onclick="clicked()">Click</button>
<div>Result</div>
<script>
  function clicked() {
    fetch('/api/test-id/1').then(response => { 
      // logs as "http://localhost:53845/api/test-id/1" in the Cypress test runner
      const div = document.querySelector('div')
      div.innerText = response.status
    })
  }
</script>

Minimatch

The 2nd intercept uses a string which will match using minimatch. Use this code to check the intercept will work with your app's URL

Cypress.minimatch(<full-url-from-app>, <url-in-intercept>)  // true if matching 

You can try a regular expression, see contains#Regular-Expression.

See this question Regular expression containing one word or another for some formats

I think something as simple as this will do it,

cy.get(el).contains(/submit|enviar/g)

Experiment first on Regex101 or similar online tester.

Maybe build it with

const runout = ['submit', 'enviar']
const regex = new RegExp(`${runout.join('|')}`, 'g')
cy.get(el).contains(regex)

Take a look at Deal with window.location.replace. The approach is to rename window.location in the source, before the page is loaded.

How well this works depends on the structure of your app. If you post some details, I can look at giving a more specific example.

it('replaces', () => {

  cy.on('window:before:load', (win) => {
    win.__location = {                           // set up the stub
      replace: cy.stub().as('replace')
    }
  })

  cy.intercept('GET', 'index.html', (req) => {   // catch the page as it loads
    req.continue(res => {
      res.body = res.body.replaceAll(
        'window.location.replace', 'window.__location.replace')
    })
  }).as('index')

  cy.visit('index.html')
  cy.wait('@index')

  cy.contains('h1', 'First page')
  cy.get('@replace').should('have.been.calledOnceWith', 'https://www.cypress.io')
})

The redirect is quite unusual.

You can block the new tab by using an intercept on the page load.

Another intercept will verify the redirect goes to correct URL.

it('tests a funky redirect', () => {

  const baseUrl = Cypress.config('baseUrl')

  cy.intercept('GET', baseUrl, (req) => {
    req.continue(res => {
      res.body = res.body.replace(
        'form.target = option.target || "_blank";', 
        'form.target = "_self";'                      // prevent tab opening
      )
    })
  })

  cy.visit(baseUrl);

  cy.intercept('GET', '**/www.google.co.in/*').as('newTab')

  cy.get('a').click()

  cy.wait('@newTab').then(interception => {
    expect(interception.request.url).to.include('www.google.co.in')
  })

  cy.go('back')         // previous location
});