How to use printCypressCommandsHelper method in Cypress

Interesting idea for selectively running tests, which is difficult to do.

Here's my (slight) optimisation.

test

 /* For checking out the extension - normally set externally */
 Cypress.env('testTags', 'regression')
 // Cypress.env('testTags', 'smoke')
 // Cypress.env('testTags', 'smoke,regression')
 // Cypress.env('testTags', null)

 itByTag(['smoke'], 'should run with SMOKE tag', () => {
   expect(1 + 1).to.be.equal(2);
 });

 itByTag(['regression'], 'should run with REGRESSION tag #1', () => {
   expect(1 + 1).to.be.equal(2);
 });

 itByTag.only(['regression'], 'should run with REGRESSION tag #2', () => {
   expect(1 + 1).to.be.equal(2);
 });

 itByTag(['smoke', 'regression'], 'should run with SMOKE and REGRESSION tags', () => {
   expect(1 + 1).to.be.equal(2);
 });

itByTag.js support file

const itByTag = (tags, description, callback) => {
  _itByTag(tags, description, callback)
};

// Adding 'only' extension
itByTag.only = (tags, description, callback) => {
  _itByTag(tags, description, callback, 'only')
};

// Adding 'skip' extension
itByTag.skip = (tags, description, callback) => {
  _itByTag(tags, description, callback, 'skip')
};

// internal implementation
const _itByTag = (tags, description, callback, onlyOrSkip) => {
  const tagsToRun = Cypress.env('testTags');
  const shouldRun = !tagsToRun || 
    tags.some(tag => tagsToRun.split(',').includes(tag));
  if (shouldRun) {
    const itFn = onlyOrSkip ? it[onlyOrSkip] : it;
    itFn(description, callback)
  }
};

export default itByTag;

Your route should point to just the path, not the full URL. Try changing it to cy.route("/admin/portfolio/putstrategy").as("updatetrategy")

I'm assuming it's just a snippet from your test, but if you don't have cy.server() before you call into cy.route(), you'll need to add that as well.

Based on the Cypress Testing Library examples, instead of passing the role in an object (cy.findByRole({ role: "checkbox" })), you should be passing it as the first argument:

cy.findByRole("checkbox");

Beyond that, as Jonah pointed out, I think your test may be failing because you are trying to assign the return value of cy.findByRole to a variable. In Cypress, everything is asynchronous, so you need to chain your assertions. This is explained in more depth in the Cypress documentation.

Here is your test case rewritten with all of the above in mind:

cy.findByRole("checkbox").should("not.be.checked");
cy.get(".accordion__itemContent").invoke("display").equal("none")
cy.findByRole("checkbox")
  .check()
  .should("be.checked");
cy.get(".accordion__itemContent").invoke("display").equal("block")

The solution ended up being quite simple.

In the original VBS code the "content-length" was set to 1000 - my assumption was that if it worked for VBS it would also work for Cypress. As it turns out setting "content-length" based on the actual XML payload length was the trick.

From: 'content-length': '1000',

To: 'content-length': text.length,

Maybe you can leverage Cypress.$. Please note however that the documentation doesn't precisely advertise it as a testing tool:

This is a great way to synchronously query for elements when debugging from Developer Tools.

Anyhow, I believe something along this line will yield the value you expect:

selector = 'div[data-cy-type="group-component"]:first select[name=group_id] option'
count = Cypress.$(selector).length

As @RosenMihaylov says, you might find it easier to use the Cypress "relationship" commands which follow the HTML structure, rather than CSS selectors.

Also I think you would need two clicks - one to open the menu and the second to invoke the delete action.

Step 1 - looks like the text devEnv_admin identifies the card you want

cy.contains('div', 'devEnv_admin')

which gives you the 7th div down.

Step 2 - the dropdown you need to click is 2nd sibling to the above

.siblings('div.note-event__dropdown')  // list of siblings matching the selector
.eq(0)                                 // take the first (and only)

which gives you the parent of the dropdown button.

Step 3 - but it looks like the child of that which has class button might have the click event handler (you might have to experiment here because elements with event handlers are sometimes difficult to find)

.children('div.button')   // list of children matching the selector
.eq(0)                    // take the first (and only)
.click();

which should open the menu, but it might take some milliseconds to appear

Step 4 - wait for the div with the text you need

cy.contains('span', 'Delete yield')   // this form of .contains() waits for the text
  .click();

In summary,

cy.contains('div', 'devEnv_admin')
  .siblings('div.note-event__dropdown')  // list of siblings matching the selector
  .eq(0)                                 // take the first (and only)
  .children('div.button')                // list of children matching the selector
  .eq(0)                                 // take the first (and only)
  .click();

cy.contains('span', 'Delete yield')   // this form of .contains() waits for the text
  .click();

There are other paths through the DOM elements and other selectors you can use, like .next() and .parent().

A lot depends on where the event handlers are attached, which is easiest to find out by looking at the source code.

Alternatively, using within()

cy.contains('.yield-event__date-and-text--container', 'devEnv_admin')  // pick the card
  .within(() => {  // restricts commands below to this card
    cy.get('div.button.dropdown').click();
    cy.contains('span', 'Delete yield').click();
  });

The Cypress input commands (e.g. cy.type() and cy.clear()) work by dispatching input and change events - in the case of cy.type(), one per character. This mimics the behavior of a real browser as a user types on their keyboard and is enough to trigger the behavior of most application JavaScript.

However, Slate relies almost exclusively on the beforeinput event (see here https://docs.slatejs.org/concepts/xx-migrating#beforeinput) which is a new browser technology and an event which the Cypress input commands don’t simulate. Hopefully the Cypress team will update their input commands to dispatch the beforeinput event, but until they do I’ve created a couple of simple custom commands which will trigger Slate’s input event listeners and make it respond.

// commands.js
Cypress.Commands.add('getEditor', (selector) => {
  return cy.get(selector)
    .click();
});

Cypress.Commands.add('typeInSlate', { prevSubject: true }, (subject, text) => {
  return cy.wrap(subject)
    .then(subject => {
      subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: text }));
      return subject;
    })
});

Cypress.Commands.add('clearInSlate', { prevSubject: true }, (subject) => {
  return cy.wrap(subject)
    .then(subject => {
      subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteHardLineBackward' }))
      return subject;
    })
});

// slateEditor.spec.js
cy.getEditor('[data-testid=slateEditor1] [contenteditable]')
    .typeInSlate('Some input text ');

cy.getEditor('[data-testid=slateEditor2] [contenteditable]')
    .clearInSlate()
    .typeInSlate('http://httpbin.org/status/409');

If you need to support other inputTypes, all of the inputTypes supported by Slate are listed in the source code for editable.tsx

In fact you have two loops to break

• the main for loop where break will stop it
• the each loop where you can't use break because you are in a callback -> you can use every and return false to stop this loop when condition is meet

let iterationspage = 10;
let data = ['test1','test2','test3','test4']

for (let i = 2; i <= iterationspage; i++) {
      result = data.every(($el, index, $list) => {
        if ($el === 'test3') {
          return false;
        }
        console.log($el);
        return true;
      });
      if (!result) {
        break;
      }
}

I think you also need to await the request() call, or perhaps use Cypress cy.request() instead.

let token = "";
let authToken = "";

describe('POST /jobs', function () {
    before(async function () {
        var option = {
            'method': 'POST',
            'url': 'https://login.microsoftonline.com/<tenant_id>/oauth2/v2.0/token',
            'headers': {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            form: {
                'client_id': `${userConfig.client_id}`,
                'grant_type': 'password',
                'Password': `${userConfig.Password}`,
                'UserName': `${userConfig.UserName}`,
                'scope': `${userConfig.scope}`,
                'client_secret': `${userConfig.client_secret}`
            }
        };
        await request(option, function (error, response) {
            if (error) throw new Error(error)
            const modifyResponse = JSON.parse(response.body)
            token = modifyResponse["access_token"]
        })
    })
    it('Create Job should return 201 status code', async () => {
        authToken = token
       ...

With cy.request, you don't have to await

cy.request(option)
  .then(response => {
    // if error, it's already thrown
    token = response.body["access_token"]
  })

Using Mocha done() to signal request is complete

Above async only works with Promise-based requests.

To wait for the request(options, callback) to complete pass in Mocha's done() function and call it after setting your token.

This is a simple example, using a JSONPlaceholder to request some data

const request = require('request');

let token;

before(function (done) {
  request({
    'method': 'GET', 
     'url': 'https://jsonplaceholder.typicode.com/todos/1' 
  }, function (error, response) {
    const modifyResponse = JSON.parse(response.body)
    token = modifyResponse.title
    done()                          // signal end of request
  })
})

it('sees the token', () => {
  expect(token).to.eq('delectus aut autem')   // passes
})