KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use originalFn method in Cypress

Best JavaScript code snippet using cypress

SpyStrategySpec.js

1describe("SpyStrategy", function() {2  it("defaults its name to unknown", function() {3    var spyStrategy = new j$.SpyStrategy();4    expect(spyStrategy.identity()).toEqual("unknown");5  });6  it("takes a name", function() {7    var spyStrategy = new j$.SpyStrategy({name: "foo"});8    expect(spyStrategy.identity()).toEqual("foo");9  });10  it("stubs an original function, if provided", function() {11    var originalFn = jasmine.createSpy("original"),12        spyStrategy = new j$.SpyStrategy({fn: originalFn});13    spyStrategy.exec();14    expect(originalFn).not.toHaveBeenCalled();15  });16  it("allows an original function to be called, passed through the params and returns it's value", function() {17    var originalFn = jasmine.createSpy("original").and.returnValue(42),18        spyStrategy = new j$.SpyStrategy({fn: originalFn}),19        returnValue;20    spyStrategy.callThrough();21    returnValue = spyStrategy.exec("foo");22    expect(originalFn).toHaveBeenCalled();23    expect(originalFn.calls.mostRecent().args).toEqual(["foo"]);24    expect(returnValue).toEqual(42);25  });26  it("can return a specified value when executed", function() {27    var originalFn = jasmine.createSpy("original"),28        spyStrategy = new j$.SpyStrategy({fn: originalFn}),29        returnValue;30    spyStrategy.returnValue(17);31    returnValue = spyStrategy.exec();32    expect(originalFn).not.toHaveBeenCalled();33    expect(returnValue).toEqual(17);34  });35  it("allows an exception to be thrown when executed", function() {36    var originalFn = jasmine.createSpy("original"),37        spyStrategy = new j$.SpyStrategy({fn: originalFn});38    spyStrategy.throwError(new TypeError("bar"));39    expect(function() { spyStrategy.exec(); }).toThrowError(TypeError, "bar");40    expect(originalFn).not.toHaveBeenCalled();41  });42  it("allows a non-Error to be thrown, wrapping it into an exception when executed", function() {43    var originalFn = jasmine.createSpy("original"),44        spyStrategy = new j$.SpyStrategy({fn: originalFn});45    spyStrategy.throwError("bar");46    expect(function() { spyStrategy.exec(); }).toThrowError(Error, "bar");47    expect(originalFn).not.toHaveBeenCalled();48  });49  it("allows a fake function to be called instead", function() {50    var originalFn = jasmine.createSpy("original"),51        fakeFn = jasmine.createSpy("fake").and.returnValue(67),52        spyStrategy = new j$.SpyStrategy({fn: originalFn}),53        returnValue;54    spyStrategy.callFake(fakeFn);55    returnValue = spyStrategy.exec();56    expect(originalFn).not.toHaveBeenCalled();57    expect(returnValue).toEqual(67);58  });59  it("allows a return to plan stubbing after another strategy", function() {60    var originalFn = jasmine.createSpy("original"),61        fakeFn = jasmine.createSpy("fake").and.returnValue(67),62        spyStrategy = new j$.SpyStrategy({fn: originalFn}),63        returnValue;64    spyStrategy.callFake(fakeFn);65    returnValue = spyStrategy.exec();66    expect(originalFn).not.toHaveBeenCalled();67    expect(returnValue).toEqual(67);68    69    spyStrategy.stub();70    returnValue = spyStrategy.exec();71    expect(returnValue).toEqual(void 0);72  });73  it("returns the spy after changing the strategy", function(){74    var spy = {},75        spyFn = jasmine.createSpy('spyFn').and.returnValue(spy),76        spyStrategy = new j$.SpyStrategy({getSpy: spyFn});77    expect(spyStrategy.callThrough()).toBe(spy);78    expect(spyStrategy.returnValue()).toBe(spy);79    expect(spyStrategy.throwError()).toBe(spy);80    expect(spyStrategy.callFake()).toBe(spy);81    expect(spyStrategy.stub()).toBe(spy);82  });...

Using AI Code Generation

1require('cypress-plugin-retries/lib/plugin')(on, config)2module.exports = (on, config) => {3  on('task', {4    log(message) {5      console.log(message)6    },7    table(message) {8      console.table(message)9    },10  })11}12describe('Test1', () => {13  it('TC1', () => {14    cy.task('log', 'This is a log message')15    cy.task('table', [{ name: 'Joe', age: 20 }, { name: 'Jane', age: 24 }])16  })17})18describe('Test2', () => {19  it('TC2', () => {20    cy.task('log', 'This is a log message')21    cy.task('table', [{ name: 'Joe', age: 20 }, { name: 'Jane', age: 24 }])22  })23})24describe('Test3', () => {25  it('TC3', () => {26    cy.task('log', 'This is a log message')27    cy.task('table', [{ name: 'Joe', age: 20 }, { name: 'Jane', age: 24 }])28  })29})30describe('Test4', () => {31  it('TC4', () => {32    cy.task('log', 'This is a log message')33    cy.task('table', [{ name: 'Joe', age: 20 }, { name: 'Jane', age: 24 }])34  })35})36describe('Test5', () => {37  it('TC5', () => {38    cy.task('log', 'This is a log message')39    cy.task('table', [{ name: 'Joe', age: 20 }, { name: 'Jane', age: 24 }])40  })41})42describe('Test6', () => {43  it('TC6', () => {44    cy.task('log', 'This is a log message')45    cy.task('table', [{ name: 'Joe', age: 20 },

Using AI Code Generation

1Cypress.Commands.overwrite('visit', (originalFn, url, options) => {2    return originalFn(url, options)3})4Cypress.Commands.overwrite('get', (originalFn, selector, options) => {5    return originalFn(selector, options)6})7Cypress.Commands.add('login', (username, password) => {8    cy.visit('/login')9    cy.get('#username').type(username)10    cy.get('#password').type(password)11    cy.get('.login').click()12})13Cypress.Commands.add('logout', () => {14    cy.get('.logout').click()15})16Cypress.Commands.add('login', (username, password) => {17    cy.visit('/login')18    cy.get('#username').type(username)19    cy.get('#password').type(password)20    cy.get('.login').click()21})22Cypress.Commands.add('logout', () => {23    cy.get('.logout').click()24})25Cypress.Commands.add('login', (username, password) => {26    cy.visit('/login')27    cy.get('#username').type(username)28    cy.get('#password').type(password)29    cy.get('.login').click()30})31Cypress.Commands.add('logout', () => {32    cy.get('.logout').click()33})34Cypress.Commands.add('login', (username, password) => {35    cy.visit('/login')36    cy.get('#username').type(username)37    cy.get('#password').type(password)38    cy.get('.login').click()39})40Cypress.Commands.add('logout', () => {41    cy.get('.logout').click()42})43Cypress.Commands.add('login', (username, password) => {44    cy.visit('/login')45    cy.get('#username').type(username)46    cy.get('#password').type(password)47    cy.get('.login').click()48})49Cypress.Commands.add('logout', () => {50    cy.get('.logout').click()51})52Cypress.Commands.add('login', (username, password) => {53    cy.visit('/login')54    cy.get('#username').type(username)55    cy.get('#password').type(password)56    cy.get('.login').click()57})58Cypress.Commands.add('logout', () => {

Using AI Code Generation

1Cypress.Commands.overwrite("visit", (originalFn, url, options) => {2  originalFn(url, options);3});4Cypress.Commands.overwrite("visit", (originalFn, url, options) => {5  originalFn(url, options);6});7Cypress.Commands.overwrite("visit", (originalFn, url, options) => {8  originalFn(url, options);9});10Cypress.Commands.overwrite("visit", (originalFn, url, options) => {11  originalFn(url, options);12});13Cypress.Commands.overwrite("visit", (originalFn, url, options) => {14  originalFn(url, options);15});16Cypress.Commands.overwrite("visit", (originalFn, url, options) => {17  originalFn(url, options);18});19Cypress.Commands.overwrite("visit", (originalFn, url, options) => {20  originalFn(url, options);21});22Cypress.Commands.overwrite("visit", (originalFn, url, options) => {23  originalFn(url, options);24});

Using AI Code Generation

1Cypress.Commands.overwrite('visit', (originalFn, url, options) => {2  cy.log('Overwriting cypress visit command')3  originalFn(url, options)4})5describe('Overwriting visit command', () => {6  it('Overwrite visit command', () => {7  })8})

Using AI Code Generation

1Cypress.Commands.overwrite('click', (originalFn, subject, options) => {2  if (Cypress.dom.isHidden(subject)) {3    return cy.wrap(null)4  }5  return originalFn(subject, options)6})7Cypress.Commands.overwrite('type', (originalFn, subject, string, options) => {8  if (Cypress.dom.isHidden(subject)) {9    return cy.wrap(null)10  }11  return originalFn(subject, string, options)12})13Cypress.Commands.overwrite('select', (originalFn, subject, string, options) => {14  if (Cypress.dom.isHidden(subject)) {15    return cy.wrap(null)16  }17  return originalFn(subject, string, options)18})

Using AI Code Generation

1Cypress.OrigFn = Cypress.OrigFn || {};2Cypress.OrigFn['test'] = Cypress.Commands.overwrite('test', (originalFn, ...args) => {3});4Cypress.OrigFn = Cypress.OrigFn || {};5Cypress.OrigFn['test'] = Cypress.Commands.overwrite('test', (originalFn, ...args) => {6});7Cypress.OrigFn = Cypress.OrigFn || {};8Cypress.OrigFn['test'] = Cypress.Commands.overwrite('test', (originalFn, ...args) => {9});10Cypress.OrigFn = Cypress.OrigFn || {};11Cypress.OrigFn['test'] = Cypress.Commands.overwrite('test', (originalFn, ...args) => {12    return originalFn(...args);13});14Cypress.OrigFn = Cypress.OrigFn || {};15Cypress.OrigFn['test'] = Cypress.Commands.overwrite('test', (originalFn, ...args) => {16    return originalFn(...args);17});18Cypress.OrigFn = Cypress.OrigFn || {};19Cypress.OrigFn['test'] = Cypress.Commands.overwrite('test', (originalFn, ...args) => {20    return originalFn(...args);21});22Cypress.OrigFn = Cypress.OrigFn || {};

StackOverFlow community discussions

Questions

Discussion

How to add regular expression to filter out the xhr URL in Cypress

Cypress - Testing that a browser-specific alert exists when submitting invalid input

How can I serve an instrumented folder to run my Cypress tests against?

Cypress overwrite 'type' command to add a small wait throws promise error if .clear() is called before

Cypress: Stub response for same route with three different responses

Cypress error when testing nested iframes in headless mode - race condition

Cypress testing a Material-UI datepicker is not working on Github actions

What is the difference between pause and debug in Cypress

Cypress - How to switch between elements in iframe

Cypress Radio Button Assertion

Cypress uses minimatch to filter URLs. Accordingly, you need to specify **/customer/*.

** — feature known as globstar. Matches all files and zero or more directories and subdirectories. If followed by a /it matches only directories and subdirectories. To work that way it must be the only thing inside the path part e.g. /myapp/**.js will not work that way.
* — Matches any string.

Source: https://globster.xyz/.

Full code:

cy.server();
cy.route('GET','**/api/customer/*').as('GETCustomer);
...
cy.wait('@GETCustomer')
  .then((response) => {
     <your handler here>
   });

Check online here

https://stackoverflow.com/questions/64787691/how-to-add-regular-expression-to-filter-out-the-xhr-url-in-cypress

For the record, I found a great example here

Cypress examples (v9.4.1) - Form validation

<form id="form-validation" action="/action_page.php">
  <div>
    <label for="item">Item:</label>
    <input id="item" type="text" name="item" required />
  </div>

cy.get('#item:invalid')
  .invoke('prop', 'validationMessage')
  .should('equal', 'Please fill out this field.')

https://stackoverflow.com/questions/71239608/cypress-testing-that-a-browser-specific-alert-exists-when-submitting-invalid-i

Instrumenting the code is dependent on the way you serve the app, but for plain javascript (not bundled) see this blog Code Coverage for End-to-end Tests

The cp command answers your question about how to handle non-js file. Essentially everything ends up (duplicated and instrumented) in build/src.

package.json

{
  "scripts": {
    "build": "npm run instrument && npm run cp",
    "preinstrument": "npm run clean",
    "instrument": "nyc instrument --compact false src build/src",
    "cp": "cp src/*.css build/src && cp src/*.png build/src && cp index.html build",
    "clean": "rm -rf build .nyc_output || true",
    "report:coverage": "nyc report --reporter=html"
  }
}

https://stackoverflow.com/questions/65833221/how-can-i-serve-an-instrumented-folder-to-run-my-cypress-tests-against

Under the hood cy.clear() is using cy.type('{selectall}{del}'), so you can avoid the wait on clearing by checking for that text.

Cypress.Commands.overwrite("type", (originalFn, subject, text, options) => {
    if (text === '{selectall}{del}') {
      console.log('clearing')
      return originalFn(subject,text,options)   // explicit return required
    } else {
      cy.wait(0).then(() => originalFn(subject,text,options))  // return value is queued
    }
  }
)

Tested with

<html>
<body>
  <input value="something"/> 
</body>
</html>

cy.get('input')
  .clear()
  .then(input => { 
    expect(input.val()).to.equal('')
    return input
  })
  .type('name')
  .then(input => { 
    expect(input.val()).to.equal('name')
    return input
  })
  .type('{selectall}{del}')
  .then(input => { 
    expect(input.val()).to.equal('')
  })

https://stackoverflow.com/questions/70627070/cypress-overwrite-type-command-to-add-a-small-wait-throws-promise-error-if-cl

I had the exact same problem and found @Richard Matsen's answer very useful, however when using the whitelist option it isn't possible to access proxy.request, which returns undefined. But if you use onRequest instead of whitelist, you can access the request and thus implement any action depending on that request's body.

So this should work:

cy.server({
  onRequest: (xhr) => {
    xhr.url = xhr.url + 
      xhr.request.body.action  == 'CARD_TRANSACTION_HISTORY' ? '?transactionHistory'
      : xhr.request.body.action  == 'CARD_BALANCE' ? '?balance'
      : xhr.request.body.action  == 'CURRENCY_RATES' ? '?currencyRates'
      : ''
  }
})

https://stackoverflow.com/questions/53654626/cypress-stub-response-for-same-route-with-three-different-responses

The problem is $iframe.on('load', only fires once, so you can't call cy.get('iframe').iframe() twice which is effectively what both .find() commands are doing.

let iframeContent = cy.get('iframe').iframe() doesn't store the iframe body, it stores a "chainer" which is treated like a function or getter.

The "infinite loop" is Cypress waiting for the promise resolve() call the second time, which never happens.

So you can nest the commands like this

cy.get('iframe').iframe().then(body => {

  cy.wrap(body).find('#happybutton').should('be.visible')
  cy.wrap(body).find('#myMenu').should('be.visible')

});

or you can enhance the command by adding a tag when the load event fires

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
  return $iframe._hasloaded 
    ? $iframe.contents().find('body')
    : new Cypress.Promise(resolve => {
        $iframe.on('load', () => {
          $iframe._hasloaded = true;
          resolve($iframe.contents().find('body'))
        })
      })
  })

https://stackoverflow.com/questions/65240569/cypress-how-to-switch-between-elements-in-iframe

Which commands you use depends on the HTML you are working with,

At minimum, you can expect the radios to be labelled for the user.

Labels on the left, use .next()

html: `
    <label>One</label>
    <input type="radio" checked>

    <label>Two</label>
    <input type="radio" >
`,
test: `

cy.contains('label', 'One')
  .next()                                // select the next element
  .should('have.attr', 'type', 'radio')  // confirm it's type radio (optional)
  .should('be.checked')

`

Labels on the right, use .prev()

html: `
    <input type="radio" checked>
    <label>One</label>

    <input type="radio" >
    <label>Two</label>
`,
test: `

cy.contains('label', 'One')
  .prev()                                // select the previous element
  .should('have.attr', 'type', 'radio')  // confirm it's type radio (optional)
  .should('be.checked')

`

Labels have "for" attribute, use .get('input#my-id')

html: `
    <input type="radio" id="one" checked>     
    <label for="one">One</label>

    <input type="radio" id="two" >
    <label for="two">Two</label>
`,
test: `

cy.get('input#one')                      // select by id used to associate the label
  .should('be.checked')

`

Labels are grouped by "name", use .get('input[value="my-value"]')

html: `
    <input type="radio" name="my-radios" value="one" checked>
    <label for="one">One</label>

    <input type="radio" name="my-radios" value="two" >
    <label for="two">Two</label>
`,
test: `

cy.get('input[value="one"]')           // select by group value attribute
  .should('be.checked')

`

https://stackoverflow.com/questions/64988960/cypress-radio-button-assertion

Blogs

Check out the latest blogs from LambdaTest on this topic:

Complete Selenium WebDriver Tutorial: Guide to Selenium Test Automation

When it comes to web automation testing, there are a number of frameworks like Selenium, Cypress, PlayWright, Puppeteer, etc., that make it to the ‘preferred list’ of frameworks. The choice of test automation framework depends on a range of parameters like type, complexity, scale, along with the framework expertise available within the team. However, it’s no surprise that Selenium is still the most preferred framework among developers and QAs.

Our 10 Most-Read Articles Of 2020

2020 is finally winding down—and it’s been a challenging year for a lot of us. But we’re pretty sure at this point that when the new year begins, this year will just – vaporize.

Manual Testing vs Automation Testing: Check Out The Differences

The most arduously debated topic in software testing industry is What is better, Manual testing or Automation testing. Although Automation testing is most talked about buzzword, and is slowly dominating the testing domain, importance of manual testing cannot be ignored. Human instinct can any day or any time, cannot be replaced by a machine (at least not till we make some real headway in AI). In this article, we shall give both debating side some fuel for discussion. We are gonna dive a little on deeper differences between manual testing and automation testing.

Best 9 JavaScript Testing Frameworks

This article is a part of our Content Hub. For more in-depth resources, check out our content hub on Selenium JavaScript Tutorial.

Now Run Your Cypress Tests On LambdaTest

Howdy techies and LambdaTest customers! In our continuous endeavor to empower the QA community, we are elated to bring Cypress framework support on LambdaTest automation testing cloud!!

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

What is Cypress? -
Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.