I am doing this with cy.wrap (see https://docs.cypress.io/api/commands/wrap/#Syntax) which returns a Cypress.Chainable that allows you to use then with the result.

Cypress.Commands.add('myFunction', () => {
    return cy.wrap('myResult');
})

cy.myFunction.then((text) => {
    console.log(text); // myResult
})

to run only one file

cypress run --spec path/to/file.spec.js

or using glob patterns:

cypress run --spec 'path/to/files/*.spec.js'

Note: you need to wrap your glob patterns in single quotes to avoid shell expansion!

to run only one test in a file

You can use a .only as described in the Cypress docs

it.only('only run this one', () => {
  // similarly use it.skip(...) to skip a test
})

it('not this one', () => {
})

Also, you can do the same with describe and context blocks

edit:

there's also a nice VSCode extension to make adding/removing .only's easier with keyboard shortcuts. It's called Test Utils (install with ext install chrisbreiding.test-utils). It works with js, coffee, and typescript:

Ref Matching URL

You can provide a substring of the URL to match

// will match any request that contains "users" substring, like
// GET /users?_limit=3 and POST /users

cy.intercept('users')

so 'http://localhost:5000/contacts' matches because it is the first defined, and partial matching applies.

You could just reverse the order of the intercepts, set the more specific URL first (sort of like routes on a SPA).

Alternatively, take a look at Set an alias dynamically.

You can use javascript to refine the response

cy.intercept('GET', 'http://localhost:5000/contacts', (req) => {

  const isContactById = req.url.split('/')  // split into parts
    .pop()                                  // take last part
    .startsWith('Contact-');                // check if has id prefix

  const bodyStub = isContactById ? dataARandomId : dataMultiple;
  req.reply(200, bodyStub);
})

Update: document.body.click will work in a browser, but for jsdom you need to manually create the event:

document.body.addEventListener('click', function() {
  console.log('test');
});

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, true);
document.body.dispatchEvent(evt)

The above code is working for me in Jest and should work with "solo" jsdom as well.

Autumn 2018 holiday update ????

The tools around simulating events have gotten a great deal better. I've currently shifted my approach to use the excellent react-testing-library to render my components and dispatch events:

import {render, fireEvent} from 'react-testing-library'

test('example', () => {
  const handleClick = jest.fn()

  const {getByText} = render(<div><button onClick={handleClick}>Click Me</button></div>)
  fireEvent.click(getByText('Click Me'))

  expect(handleClick).toHaveBeenCalled()
})

While I still believe in end to end tests with something like puppeteer or selenium (or cypress!) provide the highest level of confidence that something actually works, this provides a huge amount of value without polluting tests with manual event creation.

I checked token from the cookie that I get using method above and it is active - I managed to use it in this website using Postman. However, the described problem still exists.

Cypress.Commands.add('login', () => {
    Cypress.log({
      name: 'loginViaAuth0'
    })


return cy.request({
    method: 'POST',
            url: '/admin-api/login',
            headers: {
                "Content-Type": "application/json"
            },
            body: {
                username: Cypress.env('correctUsername'),
                password: Cypress.env('correctPassword'),
                disposableToken: 1111,
            },
            retryOnStatusCodeFailure: 463
         })
         .then((resp) => {
            document.cookie = `AuthUser=${resp.body.accessToken}` 
         })
})

Test itself:

describe('login using token/cookie', () => {

        it('should successfully log into our app', () => {
          cy.login()
            .then(() => {
              cy.visit('web')
            })
            debugger
        });
})

You may use .then(); quoting from the cypress documentation for .then():

.then() is modeled identically to the way Promises work in JavaScript. Whatever is returned from the callback function becomes the new subject and will flow into the next command (with the exception of undefined).

Try something like this:

var testArray: any[] = new Array();

cy
    .get('element')
    .each(($el) => {
        testArray.push($el.text());
        cy.log(testArray.toString());
    ).then(() => cy.log(testArray.toString())
});

Let's clarify a few things:

1) If you are just wanting to ASSERT that the div's contain the given text then this is the best possible and most precise way to do this:

cy.get('tr[data-recordid="theId"]').should(($tr) => {
  const $divs = $tr.find('div') // find all the divs

  expect($divs.eq(0)).to.contain('Text 1')
  expect($divs.eq(1)).to.contain('Text 2')
  expect($divs.eq(2)).to.contain('Text 2')
})

I can't tell if things need to be this specific. If you only want to ensure that the $tr contains text you could simplify it down to be:

cy.get('tr[data-recordid="theId"]').should(($tr) => {
  expect($tr).to.contain('Text 1')
  expect($tr).to.contain('Text 2')
  expect($tr).to.contain('Text 2')
})

Why do it this way?

• Using a .should() function will not change the subject. Your $tr will continue to be the subject going forward.
• Cypress will wait until all of the assertions in the .should() callback pass, and continually retry until they do. That guarantees you the state of multiple elements is correct before proceeding.

2) However if you just care that Cypress finds the text and you don't mind the subject being changed you could do this:

cy.get('tr[data-recordid="theId"]').within(() => {
  cy.contains('Text 1') // changes the subject to the <div>
  cy.contains('Text 2') // changes the subject to the <div>
  cy.contains('Text 3') // changes the subject to the <div>
})

This is different than the first example because instead of an explicit assertion you are simply changing the subject to whatever element the text is found in. Cypress's default assertion on cy.contains() is to retry so ultimately the behavior is the same, except you are additionally changing the subject.

If even this is too complicated you could also just do this:

cy.get('tr[data-recordid="theId"] div').contains('Text 1')
cy.get('tr[data-recordid="theId"] div').contains('Text 2')
cy.get('tr[data-recordid="theId"] div').contains('Text 3')

Your original question was also using chained cy.get() which does not drill into subjects. For that to happen use .find()

cy.get('a').get('span') // each cy.get() queries from the root
cy.get('a').find('span') // the .find() queries from the <a>

One final note: you suggested solution does not work. cy.get() does not accept a callback function, and if you look at your Command Log you will not see those 3 cy.contains from ever being invoked. In other words, they are not running. That's why its passing.

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.

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');