Hi, I'm trying to test a very custom "swipe" react component that is based on a

<input type=range />

. The simple solution would probably be to rewrite the component, but I'm getting it from another team so want to see if I can at least solve it on my side. This code actually works, for chrome, but not for headless chrome nor for electron. I have no idea why it doesn't work for those but it just doesn't. No error is thrown, except for the fact that it just isn't triggered. I can add an eventListener and see that the change event is triggered, but the line above it just doesn't do anything in headless or in electron. Any input at all would be greatly appreciated.

js
Cypress.Commands.add("swipe", {prevSubject: true},
  (subject, value) => {

    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      'value'
    ).set
    const changeInputValue = inputToChange => (newValue: Number) => {
      nativeInputValueSetter.call(inputToChange[0], newValue) // this is only triggered in Chrome
      inputToChange[0].dispatchEvent(new Event('change', { bubbles: true }))
    }

    return cy.wrap(subject)
      .trigger("mousedown", {force: true})
      .then(input => {
        changeInputValue(input)(value)
      })
      .trigger("mouseup", {force: true})
})

And to answer my own question... turns out there was a focus check in the mix as well. Not sure why it would work differently on chrome / headless. But removing it solves my problem. Will go with that for now

Hi, Any one tried out integrating light house(for performance tests) with latest versions of Cypress(above 10). Please detail the steps followed if you have successfully integrated. (https://www.npmjs.com/package/cypress-lighthouse)

you should try to use https://github.com/mfrachet/cypress-audit although im having issues with it https://github.com/mfrachet/cypress-audit/issues/181

There is a p tag which contains inner text and strong tag in which different text available , how can i get inner text only , dont want text from strong tag using css selector??

Hi. I have had this problem for quite awhile but I never figured out a solution. I need to pass data from my spec to my custom reporter. For example, let's say I have this code:

describe('My First Test', () => {
  it('Does not do much!', () => {
    this.test.myvalue = "Some Value"       // I need to pass this to my customer reporter
    expect(true).to.equal(true)
  })
})

Here is the custom reporter. In the code below, all I am doing is printing the contents of the Test object based on the corresponding events below.

function CustomerReporter(runner, options) {
  runner.on(EVENT_TEST_PENDING, function(test) {
    console.log(test)        // Print all the values of the Test object
  });
  runner.on(EVENT_TEST_PASS, function(test) {
    console.log(test)        // Print all the values of the Test object
  });
  runner.on(EVENT_TEST_FAIL, function(test) {
    console.log(test)        // Print all the values of the Test object
  });
  runner.once(EVENT_RUN_END, function() {
    // ...
  });
}

When the Test objects are printed, I never get the variable with my custom data. I only get the original Test object with no modifications. So my first question is my approach right for doing this? My second question is if not, how can I pass custom data either through the Test object or some other object so that I can have it available in my custom reporter? Any help would be so much appreciated.

Hi all, is anyone facing this issue ? "Unable to complete e2e test using paypal payment (on sanbox test website) #23647"

See https://github.com/cypress-io/cypress/issues/23647

I tryed to add the "experimentalModifyObstructiveThirdPartyCode" parameter into the cypress.config.js file: experimentalModifyObstructiveThirdPartyCode: true but with this configuration ALL my test specs fail with the following error: as soos as the cy.visit("...") command is invoked I got an unexpected exception "(uncaught exception)SyntaxError: Invalid left-hand side in assignment", see attached screenshot.

attached the errore

Trying to use the mount function I get this error with TS:

js
Argument of type '(jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string) => Chainable<any>' is not assignable to parameter of type 'CommandFn<"mount">'.

How can we assert pdf in cypress?

Depends. If you're encountering an issue, you can raise an issue on the Cypress Github. A reproducible example will give you the best chance of a quick resolution If you subscribe to their Cypress dashboard paid plan, you can also get email support from them

Okay thanks for you helpful input ...

You're welcome 🙂

I have a clarification.. I added tags to the test cases and ran using grep command. But all the test cases in the suite were executed instead of only the test cases with tags Can you please let me know what am I missing here.

Hi all, I am new here. I have been trying to push my test results from Cypress to TestRail using cypress-testrail-reporter and it creates the test run fine so it proves it can talk with test rail and knows the right project but when it runs in Github Actions it throws an error and I have no idea why. I've googled for ages but am unable to find any help. I have attached a screenshot of the error. I am only trying to publish one test result which should be a failed test. The command I am running in the CI is npm run cypress:run --browser chrome

Hello, my first post. I've just started learning Cypress and I'm on the "Testing your first application" course. https://learn.cypress.io/testing-your-first-application/app-install-and-overview but having problems compiling the application. It's failing with the attached. I've gone to the link in the error. https://nextjs.org/docs/messages/failed-loading-swc and I've installed the lastest C++ Redistributable and rebooted to no avail. Any ideas on what I'm doing wrong. Sounds like a local environment issue.

Needed to delete the modules, plus the package-lock and reimport after installing the redistribuables. It finally complied. Yay.

which cypress version is most stable, on versions 10.0 and above? 10.1.0 or 10.3.0 and etc?

i havent had any problems with 10.7.0 except for using lighthouse plugin, which may be a user error but cant figure it out

10.4.0 and above is failing for now in pipeline if using cy.request, so candidates are versions above 10.0.0 and below 10.4.0

I'm trying to create a dynamic test. My problem is I would need to run

cy.get("doc-code-box").each((element, index) => {

outside of the

it

. But this is apperently now allowed. The reason I want to do it this way, is that cypress immediately jumps to the next

forEach

case if one test in the

each

fails. But I need cypress to actually keep running

each

case and only after they are finished, it should go to the next

forEach

case.

js
function routeFn(component) {
  return `components/${component}/examples`;
}

const components = ["button", "chip", "icon"];

describe("Component screenshot", () => {
  components.forEach((component) => {
    describe(`${component} should match previous screenshot`, () => {
      before(() => {
        cy.visit({ url: routeFn(component), failOnStatusCode: false });
        cy.wait(1000);
      });
      cy.get("doc-code-box").each((element, index) => {
        it("element" + "index", () => {
          const name = `${component}-${index}`;
          cy.wrap(element).compareSnapshot(name);
        });
      });
    });
  });
});

anyone who used cypress for testing mobile ionic applications, and are there limitations for device hardware, camera, microphone, permissions and etc

I have a TS error

Cannot find type definition file for 'cypress/support/globals.d.ts'.

I already included

/// <reference types="cypress" />

inside

globals.d.ts

as per some suggested solution in Stackoverflow but still get that error. Here's what my

tsconfig.ts

on the root dir looks like:

json
{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom"],
        "types": [
            "cypress",
            "cypress/support/globals.d.ts",
            "node"
        ],
        "strict": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "baseUrl": "../node_modules",
    },
    "include": ["cypress/**/*.ts"]
}

Use https://github.com/bahmutov/cypress-each

Does anyone have any experience writing a test for Twitter Oauth? Is it as simple as Cypress's Google Oauth implementation? Was looking for a good example to follow

You can disregard this message. Instead of trying to send data back to the reporter, I simply save the report the reporter generated to file. Then in my plugin file, I have a task that combines the data I was trying to send back to the reporter with the generated report. Then I use a second script to upload this to Jira plugin called Xray. The result is I am now able add cypress generated screenshots to my Xray report!

How can we assert pdf in cypress if pdf shown on ui when click on btn?

hello 👋 I'm pretty new to Cypress and I need to introduce it in Salesforce. I'm having problems with login. I was trying to try out the solution given in this article: https://medium.com/smartbox-engineering/using-cypress-to-test-in-salesforce-a0699afe09b7 and the method in the screen, however, it does not work for me. I get this error message

For security, we don't support URLs that include login credentials. Log in on this page instead.

Does anyone have experience using Cypress in Salesforce testing?