How to use inspectPrefiltersOrTransports method in Cypress

I would consider template literals - also called backticks

cy.get(`[data-value="${value}"]`)

I'm not sure about your Wordpress site, but the following worked for the Material-UI site referenced in Cypress scrolling behaviour on get and relative positionning

.scrollIntoView() offset should be negative

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley').scrollIntoView({offset:{top: -100}})
}) 

use native scrollIntoView

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  cy.contains('Elvis Presley')
    .then($el => $el[0].scrollIntoView(false)) // scrolls $el to bottom
})

make header transparent

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.get('header').invoke('css', 'opacity', '0')
  cy.contains('Elvis Presley').scrollIntoView()
})

using .scrollTo()

This command applies to the scroll container, not the element you target, so the positioning may not come out correctly every time.

function getScrollParent(node) {
  if (node == null) return null;

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

it('make Elvis appear', () => {
  cy.viewport(750,480)
  cy.visit('https://mui.com/getting-started/templates/dashboard/');

  cy.contains('Elvis Presley')
    .then($el => {
      const scrollParent = getScrollParent($el[0])
      cy.wrap(scrollParent).scrollTo('center')
    })
})

Friends

Firstly, Thanks for all your time & suggestions.

I have found the work around to trigger the mouseover event and show the bootstrap submenu. without using the { force: true }.

Solution that I implemented. Appreciated if anyone finds different and better solution. Please do share.

Cypress.$($elem[0]).siblings("ul").show();

Using this I have manually makes the ul to show first and then execute the click event of the submenu. For this I have tried

Cypress.$($elem[0]).hover(false, false);
Cypress.$($elem[0]).mouseover();
Cypress.$($elem[0]).trigger("hover");
Cypress.$($elem[0]).trigger("mouseover");

but above commands didn't work. So I move to manually trigger the hide/show event of jquery.

The items are the children which is not exactly an array, its an HTMLCollection (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection)

so you can do

[...items].forEach()

which then turns the collection into an array

If the Submit action adds one row, try checking the row count has increased by one.

The .should('have.length', initialLength + 1) will keep rechecking until timeout occurs.

But maybe it's not timeout, instead background processing in the app. For this, also add cy.wait(0).

cy.get('tr').then($current => {

  const initialLength = $current.length;

  cy.get('button').contains('Submit').click();
  cy.wait(0);  // for background processing in the app

  cy.get('tr', {timeout: 10_000}).should('have.length', initialLength + 1)

  cy.url().should("include", "/advertisers");

  cy.get("tr").last().should("contain.text", "New Advertiser");
  cy.get("tr").last().should("contain.text", "Lom Yolk");
  cy.get("tr").last().should("contain.text", "500");
  cy.get("tr").last().should("contain.text", "Prepaid");
})

Another variant that should work (based on example app below)

cy.contains()

Without checking the row count, use cy.contains() to check for your form data.

cy.get('button').contains('Submit').click();
cy.url().should("include", "/advertisers");
cy.contains("tr", "New Advertiser");
cy.contains("tr", "Lom Yolk");
cy.contains("tr", "500");
cy.contains("tr", "Prepaid");

Minimal reproducible example

This is a simple web page with a button that asynchronously adds a row to a table.

Checking the row count after pressing the button, the test passes.

App

<body>
  <table>
    <tbody>
      <tr><td>one</td></tr>
      <tr><td>two</td></tr>
    </tbody>
  </table>
  <button>Add row</button>

  <script>
    const button = document.querySelector('button')

    function addRow() {
      setTimeout(() => {
        const tbody = document.querySelector('tbody')
        const tr = document.createElement('tr')
        const td = document.createElement('td')
        td.innerText = 'three'
        tr.appendChild(td)
        tbody.appendChild(tr)
      }, 2000)
    }
    button.addEventListener('click', addRow)
  </script>
</body>

Test

cy.get('tr').then($tr => {
  const initialCount = $tr.length
  cy.get('button').click()
  cy.get('tr').should('have.length', initialCount + 1)
  cy.get('tr').last().should('contain.text', 'three')
})

You can set the scrollBehavior globally or per test(-suite).

I'm disabling it on a per tests basis like so:

it('check something w/ autoscroll disabled', { scrollBehavior: false }, () => {
  cy.get('.tab').click();
  // do something else ...
});

Docs: https://docs.cypress.io/guides/references/configuration#Actionability

I also did the following which also worked:

cy.wait('@redeemVoucher').should(({request, response}) => {
  expect(response.statusCode).to.eq(200);

  cy.request({
    method: 'POST',
    url: request.url,
    failOnStatusCode: false,
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    }}).should((response) => {
      expect(response.status).to.eq(400);
      expect(response.body.errors[0].message).to.eq('Voucher cannot be redeemed: ' + voucherCode);
  });
});

cy.server() and cy.route() are deprecated in Cypress 6.0.0. Instead cypress introduced cy.intercept(). So you can write something like:

// declare the AJAX request we will wait for
cy.intercept('POST', '/api/authenticate').as('authenticate')

// type the username and password and click the login button
cy.get('#username').type('john-doe')
cy.get('#password').type('password')
cy.get('#login-button').click()

// wait till we get 200
cy.wait('@authenticate').its('response.statusCode').should('eq', 200)

//You can also assert request body and response body contents
cy.wait('@authenticate').its('request.body').should('include', 'username')
cy.wait('@authenticate').its('response.body').should('include', 'password')

https://testing-library.com/docs/dom-testing-library/api-queries

• getBy will throw errors if it can't find the element
• findBy will return and reject a Promise if it doesn't find an element
• queryBy will return null if no element is found:

This is useful for asserting an element that is not present.

looks like queryBy is your best choice for this problem