How to use removePackageJsonDependency method in Cypress

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();
  });

According to Best Practices | Cypress - Selecting elements, the best way to do it is using dedicated data-cy attribute for your cypress tests, and then, within the tests, using CSS attribute selectors.

Best Practice: Use data-* attributes to provide context to your selectors and insulate them from CSS or JS changes.

In your case, I would do it this way:

<div class="table"> 
   <div class="col-sm-10">Item 1</div>
   <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
   </div>
   <div class="col-sm-10">Item 2</div>
   <div class="col-sm-2 action">
    <a href="#" data-cy="item-2-anchor"><i class="fa-times-circle-o"></i></a>
   </div>
</div>

cy.get('[data-cy="item-2-anchor"]').click();

I strongly recommend doing it this way project-wide, as it guarantees working tests despite any changes made to other attributes (id, class, href ..) under development.

While this may not be the solution for everyone. Some suggested that I create a task (cy.task()) and use code from Node js to handle the request. For my requests, I used axios package to handle get requests and return a boolean if content matches value, as well as status code.

EDIT: However, I still see the assert fails due to timeouts about midway through my list or near the end. I retested this again a few days later with Steam website, and now my test runs can be completed without issue within 1.5 minutes. I did create an alternate approach to perform requests for all links at once instead of going through the iteration. (Completion time was faster by at least 10 seconds.)

Edit: (Old Approach): Task found in cypress/plugins/index.js:

const axios = require('axios').default;
 // use axios
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on('task', {
    //Work on request and return, learn what gets returned
    getURLBodyResponseContains: ({href, target}) => {
        return axios.get(href)
          .then( (response) => {
            //console.log('target: '+ target);
            if (response.data.match(target)) {
              return { answer: true, status: response.status };
            } else {
              return { answer: false, status: response.status };
            }
          })
          .catch((error) => console.log(error));
          
          
    }
})

Test Code:

it.only('Test Lanuage list', () => {
        const steamHeader = new SteamGlobalHeader(cy);

        steamHeader.getActionItem('span', 'language').click();

        steamHeader.getActionSection().get('#language_dropdown')
            .within(() => {
                const langList = /^schinese|tchinese|japanese|koreana|thai|bulgarian|czech|danish|german|spanish|latam|greek|french|italian|hungarian|dutch|norwegian|polish|portuguese|brazilian|romanian|russian|finnish|swedish|turkish|vietnamese|Steam Translation Server/;
                steamHeader.get('a[class="popup_menu_item tight"]').as('languageLinks');
                steamHeader.get('@languageLinks').should('have.length', 28);
                
                steamHeader.get('@languageLinks').each(($a) => {
                    steamHeader.getCy().task('getURLBodyResponseContains', {href: $a.prop('href'), target: langList}, {timeout: 100000}).as('returnValue');
                    steamHeader.get('@returnValue').its('status').should('equal', 200);
                    steamHeader.get('@returnValue').its('answer').should('be.true');
                    
                });
            });

    });

New Approach: I retested my test code a few days later, and now I'm not hitting the timeout issues in high frequency. While to trying to figure out alternatives, I came up with an approach of performing requests for all at once instead one by one. Once the requests are all done, return the outcome back as one array, then perform a forEach loop, wrap the object's properties and run your set of assertions. Using this approach, I noticed the test time was 10 seconds faster.

Task Code:

const axios = require('axios').default;
 // use axios
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on('task', {
    //Work on request and return, learn what gets returned
    getURLBodyResponseContains: ({href, target}) => {
        return axios.get(href)
          .then( (response) => {
            //console.log('target: '+ target);
            if (response.data.match(target)) {
              return { answer: true, status: response.status };
            } else {
              return { answer: false, status: response.status };
            }
          })
          .catch((error) => console.log(error));  
    },

    getURLListBodyResponseContains: ({hrefList, target}) => {
     return Promise.all(hrefList.map((href) => {
// Would have wanted to reuse the task from above, but not sure you could reuse a  task within a task.
        return checkIfRequestContains(href, target);
      }))
        .then((result) => {
          return result;
        })
        .catch((error) => console.log(error));
    }
  })
}

function checkIfRequestContains(url, target){
  return axios.get(url)
  .then( (response) => {
    //console.log('target: '+ target);
    if (response.data.match(target)) {
      return { answer: true, status: response.status };
    } else {
      return { answer: false, status: response.status };
    }
  })
  .catch((error) => console.log(error)); 
}

Test Code:

it('Test Language list', () => {
        const steamHeader = new SteamGlobalHeader(cy);

        steamHeader.getActionItem('span', 'language').click();

        steamHeader.getActionSection().get('#language_dropdown')
            .within(() => {
                const langList = /^schinese|tchinese|japanese|koreana|thai|bulgarian|czech|danish|german|spanish|latam|greek|french|italian|hungarian|dutch|norwegian|polish|portuguese|brazilian|romanian|russian|finnish|swedish|turkish|vietnamese|Steam Translation Server/;
                steamHeader.get('a[class="popup_menu_item tight"]').as('languageLinks');
                steamHeader.get('@languageLinks').should('have.length', 28);

                //This using task on whole array.
                let urlList = [];
                steamHeader.get('@languageLinks').each(($a) => {
                    urlList.push($a.prop('href'));
                });
                steamHeader.getCy().task('getURLListBodyResponseContains', {hrefList: urlList, target: langList}, {timeout: 100000}).as('returnValue');
                steamHeader.get('@returnValue').then(($value) => {
                    console.log($value);
                    $value.forEach((val) => {
                        console.log(val);
                        steamHeader.getCy().wrap(val).its('status').should('eq', 200);
                        steamHeader.getCy().wrap(val).its('answer').should('be.true');
                    })
                }); 


                //This approach using each loop
               /* steamHeader.get('@languageLinks').each(($a) => {
                    steamHeader.getCy().task('getURLBodyResponseContains', {href: $a.prop('href'), target: langList}, {timeout: 100000}).as('returnValue');
                    steamHeader.get('@returnValue').its('status').should('equal', 200);
                    steamHeader.get('@returnValue').its('answer').should('be.true');
                    
                }); */
            });

    })

Well this seems to work, so it tells me I have some more to learn about .should()

cy.get('.check-box-sub-text').should('not.exist');

You can access an array item (in your case it's the object) using the index position (in your case it's zero)

cy.get(".gLFyf").type(this.lead.result.records[0].Id)

Here is an example of a common login I have added in commands.js file. In my test requirement, for every test suite I need to have a login() function to be called. Here I am calling the login() inside the before({}) tag which runs once before all tests in the block. I guess, similar way you can add click through my website, but need to understand the flow of your program in more detail.

/integration/examples

Test suite and tests

describe('Some name of the test suite', function(){
  before('Before the test clear previous Cookies', () => {
    cy.wait(2000)
    cy.clearCookies()
    cy.login(Cypress.env('username'), Cypress.env('password'))

  });

  /* Test case 1*/

  it('Name of first test case', function(){
     // test steps to add 
   })      

  /* Test case 2*/

  it('Name of second test case', function () {
     // test steps to add 
   })

})

/support/commands.js file

Cypress.Commands.add('login', (username, password) => {
   cy.visit('/')
   cy.get("#Loginuser").type(username)
   cy.get("#Loginpass").type(password, {log:false})
   cy.get("button[type='submit']").contains("Login").click()
});

In JavaScript you should do like this.

JS

setTimeout(function(){ 
    $("p").show(); // Content you want to show
 }, 1000); // Delay you want to add, here it's 1 sec.

EDIT 2: This solution was written for Cypress ~3.6.0 or thereabouts so it's possible that newer versions of Cypress work very differently internally, even if you fix some superficial incompatibilities of this code.

EDIT: often someone suggests using Promise.all, which is not a correct solution. Cypress chainer objects aren't Promises/A+-compatible, they simply appear to be promises because they implement .then interface. That's why Promise.all is able to consume an array of chainer objects, but that's it. The resolution values passed to Promise.all().then callback is not going to be what you expect (see https://github.com/cypress-io/cypress/issues/915).

You can use a helper I've suggested in a similar answer:

// put this in cypress/support/index.js

const chainStart = Symbol();
cy.all = function ( ...commands ) {
    const _           = Cypress._;
    const chain       = cy.wrap(null, { log: false });
    const stopCommand = _.find( cy.queue.commands, {
        attributes: { chainerId: chain.chainerId }
    });
    const startCommand = _.find( cy.queue.commands, {
        attributes: { chainerId: commands[0].chainerId }
    });
    const p = chain.then(() => {
        return _( commands )
            .map( cmd => {
                return cmd[chainStart]
                    ? cmd[chainStart].attributes
                    : _.find( cy.queue.commands, {
                        attributes: { chainerId: cmd.chainerId }
                    }).attributes;
            })
            .concat(stopCommand.attributes)
            .slice(1)
            .flatMap( cmd => {
                return cmd.prev.get('subject');
            })
            .value();
    });
    p[chainStart] = startCommand;
    return p;
}

usage:

it('test', () => {
    const urls = [
        'https://en.wikipediaaa.org',
        'https://en.wikipedia.org'
    ];

    cy.all(
        ...urls.map(url => cy.request(url))
    ).then(responses => {
        responses.forEach( resp => {
            expect(resp.status).to.eq(200);
        });
    });
});

That being said, you can also do this:

const urls = [
    'https://en.wikipediaaa.org',
    'https://en.wikipedia.org'
];

let passes = 0;

urls.forEach( url => {
    cy.request(url).then( resp => {
        if ( resp.status === 200 ) passes++;
    });
});

cy.then(() => {
    expect(passes).to.eq(urls.length);
});

The cy.all helper atop is really useful if you want to access the results without having to keep around globals and accessing them from a cy.then() callback --- but like I've shown in the last example, everything can be worked around using just vanilla cypress.

Or, if you don't need responses at all, you can simply do:

const urls = [
    'https://en.wikipediaaa.org',
    'https://en.wikipedia.org'
];
urls.forEach( url => {
    cy.request(url).its('status').should('eq', 200);
});

This comes up frequently. Cypress has some documentation stating Commands are not Promises. I did a write up using a custom command to force a Command Chain to behave like a promise, but it is still experimental and nuanced.

First I'll give your example almost verbatim to what you're trying to accomplish:

cy.url().should('include', '/home').then(() => {
  cy.window().then(win => {
    console.log(win) // The window of your app, not `window` which is the Cypress window object
  })
})

Your example could be written a number of ways, but maybe explaining a bit how Cypress works will help more.

Cypress has something called "Commands" that return new "Chainers". It is fluid syntax like JQuery:

// fill and submit form
cy
  .get('#firstname')
  .type('Nicholas')
  .get('#lastname')
  .type('Boll')
  .get('#submit')
  .click()

You can (and should) break up chains to be more like sentences:

// fill and submit form
cy.get('#firstname').type('Nicholas')
cy.get('#lastname').type('Boll')
cy.get('#submit').click()

You might have guessed that all Cypress Chainer commands are asynchronous. They have a .then, but they aren't actually promises. Cypress commands actually enqueue. Cypress hooks into mocha's lifecycle to make sure a before, beforeEach, it, afterEach, after block waits until Cypress commands are no longer enqueued before continuing.

Let's look at this example:

it('should enter the first name', () => {
  cy.get('#firstname').type('Nicholas')
})

What actually happens is Cypress sees the cy.get Command and enqueues the get command with the argument '#firstname'. This immediately (synchronously) returns execution to the test. Cypress then sees the cy.type command with the argument 'Nicholas' and returns immediately to the test. The test is technically done at this point since there is no done callback and no Promise was returned. But Cypress hooks into the lifecycle of mocha and doesn't release the test until enqueued commands are completed.

Now that we have 2 enqueued commands and the test is waiting for Cypress to release the test, the get command is popped off the queue. Cypress will try to find an element on the page with an id of firstname until it finds it or times out. Assuming it finds the element, it will set a state variable called subject (cy.state('subject'), but don't rely on that). The next enqueued command type will grab the previous subject and attempt to type each key from the string 'Nicholas' one at a time with a default delay of 50ms until the string is done. Now there are no more enqueued commands and Cypress releases the test and the runner continues to the next test.

That was a bit simplified - Cypress does a lot more to make sure .type only runs on elements that can receive focus and are interactable, etc.

Now, knowing this, you can write your example a bit more simply:

cy.url().should('include', '/home')

// No need for `.then` chaining or async/await. This is an enqueued command
cy.window().then(win => {
  console.log(win)
})