How to use guessOrAskForFramework method in Cypress

I used webpack + babel-loader + @babel/preset-typescript + babel-plugin-istanbul

basically the strategy is:

• instrument your app code so that coverage is generated on window.__coverage__
• after cypress spec runs, use cy.writeFile to save the report to .nyc_output
• and generate the report with cy.exec('nyc report --reporter=html')

you should then be able the view the html coverage report in the coverage/ directory

Here's the changes I made to your project, switching to webpack with fully working code coverage:

https://github.com/Bkucera/cypress-code-coverage/commit/40f88aa27778dc55ad3fae56af66724f73b6496d

I have put together other working examples here. It has examples of setting up code coverage on top of a newly ejected create-react-app(uses webpack) and a vanilla typescript + webpack project:

create-react-app-ejected:

cypress with code coverage set up on a newly-ejected create-react-app uses:

• @babel/preset-typescript
• @cypress/webpack-preprocessor
• babel-loader
• babel-plugin-istanbul

vanilla-typescript-webpack:

code coverage on a vanilla typescript & webpack project uses:

• @babel/preset-typescript
• @cypress/webpack-preprocessor
• babel-loader
• babel-plugin-istanbul

In both of these I also instrument the cypress code so that you could possibly merge the coverage reports, but I don't do that currently

Cypress has a unique workflow that is based around baking in as many tests as possible into its default behavior. Before it simulates the click on the element containing "Family", it checks for actionability. This is a built in test that will fail if the element is hidden, display:none(that's the case here), size 0,0, etc. Only after it passes that test will it simulate the action on the element containing 'Family'.

You can override the actionability check by using .click({force:true}), but then you lose the guarantee that the user would actually be able to find and click on the element.

The proper way to do this test is to trigger the dropdown menu so that the element becomes visible, and then do the click. Here's what you would do if you wanted to find the "Genre" menu item, reveal the dropdown menu, and click the "Family" item:

describe('Hover Menu',()=>{
    it('can click on a genre sub-menu item',()=>{
        cy.get('#menu').contains('Genre').next('.sub-menu').then($el=>{
            cy.wrap($el).invoke('show')
            cy.wrap($el).contains('Family').click()
        })
    })
})

Here, show is a jQuery method that modifies CSS properties to make the element visible.

cy.wrap($el) turns a jQuery element into a Cypress Chainer, which you can then call Cypress commands on.

Something like

cy.request('GET', myUrl).its('body')
    .then(res => cy.request('GET', res).its('body'))
    .then(subRes => cy.request('GET', subRes).its('body'))
    .then(subSubRes => {
        expect(subSubRes, myMessage).to.eq(myEvaluation);
    });

should work.

Maybe if i use a callback like parameter, then the second function will wait for the asynchronous task is over

   export function createSession(email,password,user_id,callback){
    cy.request({
        method:'POST',
        url:config.accounts_prod + '/token',
        headers:{ 
            'authorization': 'Basic testestestestest'
        },
        qs:{
            'grant_type':'password',
            'username':email,
            'password':password
        }
    }).then((response)=>{
        var X = response.body.access_token      
        cy.log("create session " + x)
        callback(response.body.access_token, user_id);

    })
}

var login = function (token,user_id) {
    var result = cy.request({
    method:'POST',
    url:config.ws_prod + '/login.pl',
    headers:{ 
        'authorization': token,
        'Content-Type' : 'application/x-www-form-urlencoded'
    },
    body:'user_id='+user_id+'&device_id='+device_id+'&os_type='+os_type
    })
    return token
}



// then call first fn

createSession(email,password,user_id,login);

Not sure what happens in your case. Here is the resolved settings when doing just npx cypress open

Now when I run with $ npx cypress open --env country=Canada here is the resolved settings tab

Try this:

cy.get('#twotabsearchtextbox').click().get('#searchDropdownBox').select('Books',{force: true})

You can write something like:

cy.request({
  body: {},
  failOnStatusCode: false,
}).then((res) => {
  if (res.status == 404) {
    cy.log(JSON.stringify(res.body)) //prints the response body
    cy.log(res.body.name) //prints name
    cy.log(res.body.message) //prints message
  } else {
    //Do Something else
  }
})

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

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: