How to use getMatcherOptions method in Cypress

You can use the times option to make sure your intercept only matches once and redefined it later when you are expecting the request. Example:

cy.intercept({ url: /\/api\/.*\/path\/.*/, times: 1 }).as("fetchingMyData")
cy.wait("@fetchingMyData").then(() => { ... }) // the first wait


cy.intercept({ url: /\/api\/.*\/path\/.*/, times: 1 }).as("fetchingMyData2") // this resets the alias and the intercepted requests so that any request made before this point won't be considered.
cy.wait("@fetchingMyData2").then(() => { ... }) // the second wait

Have a look at the options in the docs for more info: https://docs.cypress.io/api/commands/intercept#routeMatcher-RouteMatcher

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>

I was able to resolve this by adding an override section for js files that ignore the rule, like so:

overrides: [
    {
      files: ["**/*.js"],
      rules: {
        "@typescript-eslint/tslint/config": ["off"] //this is the rule that was causing the message, but you can add other rules here
      }
    }
  ]

I added this section outside of the main rules section.

Cypress clears the alias between tests.

Aliases are reset before each test

Note: all aliases are reset before each test. A common user mistake is to create aliases using the before hook. Such aliases work in the first test only!

Remove the (unnecessary) it() blocks. Why do you have them there?

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

Some elements contain whitespace and some don't. If you have a newline in your element definition, then it contains whitespace.

<div class='this_element_contains_whitespace'>
  <span></span>
</div>

<div class='this_element_doesnt'><span></span></div>

trim() is used to allow the first element to pass the test.

If you set up react with webpack, you need to install @babel/preset-react, add this to the .babelrc file and you have to

      import React from "react"

on top of each file that you are using jsx.

here is .babelrc configuration. it should be placed in the root.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "babel-plugin-lodash",
    "babel-plugin-transform-react-remove-prop-types"
  ]
}

.babelrc should be in the root of the project.

You need to tell Typescript that some of parameters are optional:

// index.d.ts
declare namespace Cypress {
  interface JQuery<HTMLElement> {
    rsChoose(text?, num?, all?): JQuery<HTMLElement>
  }
}

Also if you use Typescript I recommend you to add types to your parameters ;)

After updateContact() you would need to return contactId, similar to the getContactList() and getContactList() sections.

createContact(...)
...
.then((contactId) => {
  return updateContact(
    ..
  ).then(({ status, body }) => {
    expect(status).to.eq(200);
    const { name } = body;
    expect(name).to.eq("newname");

    return contactId
  });
})
.then((contactId) => {
  delContact(contactId, HeadersType.contentJSON).then((resp) => {
    expect(resp.status).to.eq(204);
  });
});