Cypress Community #i-need-help

Cypress Terminal Issues

busy-window-36430

05/19/2023, 9:43 PM

I ran into a super weird issue that I can't figure out where the cypress terminal is being blocked. Any ideas? https://www.loom.com/share/6f0230efba214d089c0d28d54374c39a

Cypress stops working my main account on w10 after running 1-2 tests.

white-bird-68512

05/20/2023, 6:18 PM

Using windows 10 and running tests on chrome. After ran 1 or 2 tests, can't run another test. It just freezes at "your tests are loading". I have tried to uninstall and install again, not working. But it runs perfectly with my second account on my windows 10.

Chromium browser not detected if chromium installed with snap

prehistoric-rainbow-62451

05/21/2023, 1:48 PM

I can only see Electron browser as browsers installed in my pc. When I run cypress info with debug, I see that cypress could not detect version info via regex due to snap. cypress:launcher:linux Could not extract version from stdout using regex: { stdout: 'snap 2.59.2\n' + 'snapd 2.59.2\n' + 'series 16\n' + 'ubuntu 22.04\n' + 'kernel 5.14.0-1054-oem', versionRegex: /Chromium (\S+)/m } +0ms Any pointers?

https://cdn.discordapp.com/attachments/1109840034389053460/1109840034598756352/Screenshot_from_2023-05-21_16-45-56.png▾

Need assistance with navigating and interacting with elements on a Servicenow dev instance.

astonishing-forest-59107

05/21/2023, 7:23 PM

Hey everyone, I've been trying to automate a specific task on my Servicenow dev instance, but I'm unable to successfully navigate to a specific input field and type into it. Here's what I've tried so far: 1. Using shadow DOM traversal: I've attempted to navigate through the shadow DOM by using the

.shadow()

method, but it hasn't been successful. I've followed the recommended approach of traversing through parent elements, but I keep encountering errors such as timeouts and undefined properties. Despite stepping through all the parent elements leading down to the target input field, I'm still unable to locate it and interact with it. I've spent a considerable amount of time troubleshooting and exploring different options, but I seem to be hitting a roadblock. I'm wondering if there might be alternative approaches or techniques that I haven't considered. The element I'm trying to locate, you can see from the screen sot, is an input field: I am walking down the DOM and this is as far as I can get before it suddenly can't find any other element:

Copy code

cy.get('macroponent-f51912f4c700201072b211d4d8c26010')
        .should('not.be.visible')
        .shadow()
        .find('div')
        .should('not.be.visible')
        .find('sn-polaris-layout')
        .should('not.be.visible')
        .shadow()
        .should('not.be.visible')
        .find('div.sn-polaris-layout.polaris-enabled')
        .find('sn-polaris-header')
        .shadow()
        .should('not.be.visible')
        .find('nav.polaris-layout')
        .find('div.polaris-header.can-animate.polaris-enabled')
        .find('sn-polaris-menu.can-animate[aria-label="Unpinned Workspaces menu"]')
        .shadow()
        .should('not.be.visible');

I have also tried:

Copy code

cy.get('macroponent-f51912f4c700201072b211d4d8c26010')
  .shadow()
  .find('sn-polaris-menu.can-animate[aria-label="Unpinned Workspaces menu"]')
  .invoke('attr', 'class', 'can-animate is-main-menu is-open');

cy.get('sn-polaris-nav.63242b61c3133010cbd77096e940dd23')
  .invoke('attr', 'aria-expanded', 'true');

I even tried manually using keyboard commands, although there's unfortunately no tab command. 😭 I highly suspect the issue is the menu that needs to be open and visible, is actually located in a different area of the DOM than the filter itself. So, traversing down to the menu and expanding / clicking / focsing / anything, does not allow me to find any other element not directly in that area? But, if I try to just navigate directly to the filter itself, about 75% of the way there, something with the menu's makes it so I can't actually find anything anymore: In the second screen shot you can see where it stops beyond that .shadow() I can't figure out ANY way to target the child or any other element in that root... If anyone has experience with or has encountered similar challenges, I would greatly appreciate your guidance and suggestions. It would be incredibly helpful if you could share any insights, alternative approaches, or potential solutions that could help me successfully interact with this input field. Thank you in advance for your assistance!

https://cdn.discordapp.com/attachments/1109924336355262565/1109924336720150528/image.png▾

Npx cypress command not executed from cron job

freezing-activity-66869

05/21/2023, 11:25 PM

I have a bash script getting executed from cron job , all commands are getting executed perfectly except the cypress commands , please assist where is the issue. Upon googling heard the node path to given, if someone can modify it & give me it would be great Cron job command: # ┌───────────── minute (0 - 59) # │ ┌───────────── hour (0 - 23) # │ │ ┌───────────── day of the month (1 - 31) # │ │ │ ┌───────────── month (1 - 12) # │ │ │ │ ┌───────────── day of the week (0 - 6) (Sunday to Saturday; # │ │ │ │ │ 7 is also Sunday on some systems) # │ │ │ │ │ # │ │ │ │ │ # * * * * * * * * * * /usr/local/bin/node cd Desktop/Spectrum/2023_20/captiveportal && sh cypress/scripts/Testbash3.sh Below is the command present in my bash file which is not getting triggered npx cypress-repeat run -n 3 --until-passes --browser chrome --spec cypress/tests/client/portal/spectrumwifi/cucumber/login/login_AP.feature --headed

Optional input fields based on different environments of application- How to handle?

freezing-activity-66869

05/22/2023, 1:24 AM

I have a portal which has difference in fields based on different environment to input text , is there a way i can input field value if those field is present if not just ignore and go to next step. Please share some example or references which can be used to implement the above

Still waiting to connect to Firefox, retrying in 1 second - this occurs with cypress": "^12.11.0"

freezing-activity-66869

05/22/2023, 2:02 AM

I was told firefox issue mentioned wont up come with latest cypress but still it occurs intermittently , please assist for the fix or suggestion if any to resolve it ( reference screenshot too)

https://cdn.discordapp.com/attachments/1110024832533405706/1110024832696995850/Screenshot_2023-05-21_at_8.00.06_PM.png▾

Absolute imports for modules with Cypress 12

famous-wire-30070

05/22/2023, 2:12 AM

I'm unable to get absolute imports for local modules working with Cypress. I've tried multiple things: 1. Cypress Webpack Preprocessor https://github.com/cypress-io/cypress/tree/master/npm/webpack-preprocessor 2. tsconfig-paths https://github.com/cypress-io/cypress/issues/3262#issuecomment-683267360 3. module-alias https://github.com/ilearnio/module-alias All of these are throwing various errors. I can't find any instructions for how to get absolute imports working with Cypress 12. All the info I've found online seems to be for older versions of Cypress, but when I tried it with the latest version, none worked. Does anyone know a guide for setting up absolute imports with Cypress 12?

Component Testing suggestion

important-noon-13871

05/22/2023, 7:10 AM

I would like to use Cypress component testing instead of Jest & React Testing Library. So far, I have a little struggle since my component will use dispatch & useSelector for Redux, and i18 to support multiple language. For example, there is one of my button component, I will take userInfo & targetCompanyId from Redux store, how could I mock them ?

Copy code

export default ({
    label,
    feature,
    featureDetail,
    size = 'medium',
} => {
    const { t, i18n } = useTranslation();

    const userInfo:(userInfoProps|null) = useAppSelector(({ root }) => root.userInfo);

    const targetCompanyId:string = useAppSelector(({ root }) => root.targetCompanyId);

  const openAirtableLink = () =>{
    //formUrl will use userInfo & targetCompanyId to build url
    window.open(formUrl, '_blank');
  }

    return (
        <Button 
            className="account-upgrade-button"
            size={size}
            label={label || t(`general.btn_upgradeAccount`)}
            color={standardColor.secondary}
            iconImageSize={16}
            iconUrl="./circled-up-2.png"
            onButtonClick={openAirtableLink}
        />
    );
};

I don't know how to mock a variable, function or hook with cypress, there are only few resource for cypress component testing. Or maybe I should correct my word, what's the boundary for e2e & component testing in cypress? should I really need it or just always do e2e testing?

Loading and loading so on although the script was executed once.

some-room-78246

05/22/2023, 7:38 AM

Hello hope you all are doing great i execute this script once after a while as i want to execute the same script it continuously loading and loading . Although my script is fine and i have also enter pageload time out kindly gave a solution. Note : The website is single page. @best-flower-17510

https://cdn.discordapp.com/attachments/1110109344084787201/1110109344500027392/Screenshot_49.png▾

help me

careful-finland-33432

05/22/2023, 10:46 AM

Hello everyone, please help me .. When I click on a button, nothing happens until I press the button manually Although the Cybers see this button and select it and click, but nothing happens

Waiting for the next request occurrence to finish

gorgeous-kite-84316

05/22/2023, 12:02 PM

I have a system in which a specific POST call is made regularly. My test affects what the next POST call will return, however when I use cy.wait it immediately passes because a previous call has taken place. Is it in any way possible to make cy.wait wait for the next call?

How to identify which version of bootstrap used in cypress?

breezy-night-28671

05/22/2023, 12:10 PM

Basically, In my angular application in dev env, I want to upgrade it to v5.2.3, so some of the class name is changed. Now I want to identify which bootstrap version did our application used using cypress, so that I would use bootstrap class conditionally based on it's version, so that the my test cases would also run in beta env which is using the old bootstrap version (v4)

Is there any recipes or tutorials on how to use Cypress for grid testing?

fast-artist-45202

05/22/2023, 3:45 PM

This would be separate from my current e2e work. Is there a way to take an external grid test plan such as Google Sheets, grab the value of cells in column X, then compare the results to the values of cells in column Y?

cy.readFIle() is making freeze the terminal

rapid-rain-23688

05/22/2023, 4:09 PM

I am trying to use the cy.readFile() to check that after a click on a button the file is downloaded correctly. So I'm using cy.readFile(pathFile) to check only the existance. The issue is that the file is downloaded in 10 secs, but the run takes all the 30 sec of the timeout, then the console prints me the name of the feature file in red, as per the test is failing. But then the terminal just stays frozen, nothing happen until I kill it manually. Reading online seems that the freeze is due to the size of the file, but this is not my case, since my downloaded file is like 2kB. Please send help

Bahmutov's cypress-playwright

echoing-tent-95037

05/22/2023, 6:21 PM

I would really love to get this working, but currently after pulling it down and setting the import in my

e2e

Im using the test example and get a

Unexpected reserve word await

. Any ideas on how to fix this?

how can i reliable get CI mode to work as normal?

white-salesclerk-96926

05/22/2023, 6:35 PM

In the same computer, CI always fails, while normal e2e works. The case is a select where it should click, then type, then choose the option, it works while normal, why doesn't it work in the CI mode?

Run synchronous request before `cy.visit` on every test

nice-summer-59524

05/23/2023, 3:19 AM

I'm introducing feature flagging to our cypress tests. We use feature flags on both the frontend and the backend, so simply mocking flag values on the frontend would not be sufficient to test E2E behaviour. I've created a development-only API route, which allows flag values to be overridden for the session. The plan is to have Cypress make a request to that route before each test, so that the backend will return the appropriate flags for that test. The flags are provided on a per test basis by passing a

flags

property to the test options. I've attempted to make that request a couple ways, but each attempt has either failed, or been flaky due to race conditions. 1. Modify
cy.visit
using
Cypress.Commands.overwrite
, so that flag overrides are applied before each visit.

Copy code

js
Cypress.Commands.overwrite('visit', (original, url, options) => {
  cy.request({
    method: 'POST',
    url: '/dev/flags/override',
    body: Cypress.config('flags') || {},
  }).then(() => {
    original(url, options);
  });
});

This is the most straight forward solution, and seems to correctly apply flags for the first test of each spec. However when this override is applied, an error begins occurring in specs that call

visit

beforeEach

Copy code

CypressError: Timed out retrying after 4050ms: `cy.click()` failed because the page updated while this command was executing.

Copy code

Timed out retrying after 4050ms: cy.first() failed because the page updated as a result of this command, but you tried to continue the command chain. The subject is no longer attached to the DOM, and Cypress cannot requery the page after commands such as cy.first().

The first test in a spec will pass normally, but each test after that will fail. I suspected it might be because the newly overwritten

visit

command resolves when the override request completes, rather than when the

original

call completes. So I tried to address that manually:

Copy code

js
Cypress.Commands.overwrite(
  'visit',
  (original, url, options) =>
    new Promise((resolve) => {
      cy.request({
        method: 'POST',
        url: '/dev/flags/override',
        body: Cypress.config('flags') || {},
      }).then(() => {
        original(url, options).then(resolve);
      });
    }),
);

This didn't work because Cypress commands doesn't use promises. 2. Run the flag override request in global
before
and
beforeEach
hooks This worked sometimes, but was flaky. My understanding is that due to the way Cypress schedules tasks, it's not possible to guarantee that tasks scheduled in the global

before

and

beforeEach

hooks would resolve before tasks in the spec's

before

and

beforeEach

hooks would run. This means if there's any latency in the flag override request, the override would not be ready by the time

cy.visit

is called.

Copy code

js
const requestFlags = () =>
  cy.request({
    method: 'POST',
      url: '/dev/flags/override',
      body: Cypress.config('flags') || {},
    }),
  });
  before(() => {
    requestFlags();
  });
  beforeEach(() => {
    requestFlags();
  });

requestFlags

would need to be run in both

before

and

beforeEach

, because some of our specs do navigation in a

before

hook. In which case, the navigation would occur before the

requestFlags

call in the

beforeEach

hook. We're working to move away from calling

visit

before

hooks, because we want tests to be better decoupled from each other. But that's a work in progress. Unfortunately, I cannot provide a reproduction repo at this time, as this is a proprietary project. If needed, I can try throwing together a minimum implementation of a server/client using this flag override approach for the purpose of debugging this and coming to a better solution. Though I'm hoping someone with more Cypress experience might be able to point out what I'm doing wrong / if there's a better approach. Any assistance would be greatly appreciated, thank you 🙂

Splitting larger data heavy tests

famous-dog-82296

05/23/2023, 9:52 AM

Hey folks, Thanks for everything you do for Cypress and for reading this post. I'm new to Cypress and I think I just need a little push in the right direction. I'm working on a multi language codebase and I'm testing both at the UI level and the API level. At the moment some of the API endpoints return all known data, other endpoints return some data for the key given. I'm not quite sure how best to format these tests. If I should have just one test that tests both global and key specific data, or if there's something I'm missing about Cypress that makes this easier. Hopefully that makes sense, let me know if you have any further questions. Any help is great

How to run before hook that runs before all the tests?

breezy-night-28671

05/23/2023, 10:32 AM

Basically I want to set bootstrap version as env variable so, I could dynamically assign selectors. For that below code should be execute before all the test. It will okay if it executes only once but it should before all the test.

Copy code

js
cy.window()
  .its('bootstrap.Button.VERSION')
  .invoke('startsWith', '4')
  .then((bootstrap4) => {
    if (bootstrap4) {
      cy.log('**Bootstrap 4**')
      cy.contains('button.btn-block', 'Save')
    } else {
      cy.log('**Bootstrap 5**')
      cy.contains('button', 'Save')
    }
  })

CREDIT for above code: @gray-kilobyte-89541

How to verify gmail messages from UI without using plugin's

quaint-machine-24156

05/23/2023, 10:48 AM

I have tried below code describe('Gmail Messages', () => { it('should read the subject lines of the messages', () => { cy.visit('https://mail.google.com%27/) // Assuming the email input field has an ID of 'identifierId' cy.get('input[type="email"]').type('your-email@gmail.com') // Assuming the 'Next' button has an ID of 'identifierNext' cy.get('#identifierNext').click() // Assuming the password input field has an ID of 'password' cy.get('input[type="password"]').type('your-password') // Assuming the 'Next' button has an ID of 'passwordNext' cy.get('#passwordNext').click() // Wait for the list of messages to load cy.get('.UI tr.zA').should('be.visible') // Extract the subject lines of the messages cy.get('.UI tr.zA .bog span.bqe') .invoke('text') .then(subjects => { // Perform assertions or further actions with the subject lines console.log(subjects) }) }) })

Tags are not working after updating cypress above 10.

ambitious-holiday-82276

05/23/2023, 12:08 PM

So when I use *npx cypress run --env --headed grepTags="@Virtual" * it should execute spec files which are tagged with Virtual but it is executing all my spec files @gray-kilobyte-89541 I also followed your doc i.e https://github.com/bahmutov/cy-grep but it didn't work for me. |

realHover is not a function error

brief-kite-35331

05/23/2023, 12:46 PM

I am using the plugin https://github.com/dmtrKovalenko/cypress-real-events I did everything as described in the documentation, but while running the test I get an error: cy.get().realHover is not a function. Did someone have similar issues? I am using the 12.7.0 version of Cypress. When I added the

import "cypress-real-events";

to the index.ts file I got an error for other declarations:

TS2315: Type 'Chainable' is not generic.

how do I find an element by using should('have.text', 'test2') inside of a then();

steep-furniture-84934

05/23/2023, 3:28 PM

I have managed to almost do what I want with the use of: cy.get('ul').then( () => { cy.get('div').contains('test2').click(); }) The problem is that if there is another div in the ul that has the value of 'test22' then there is a high chance that that one will be selected instead. How do I get the right div every time?

HTML5 Validation error

wide-eye-45012

05/23/2023, 4:39 PM

I am trying to implement HTML5 validation from https://docs.cypress.io/faq/questions/using-cypress-faq#Can-I-check-that-a-forms-HTML-form-validation-is-shown-when-an-input-is-invalid but when I use this code snippet, sourceAccount().then(input => { expect(input[0].validationMessage).to.equal('Please select an item in the list.'); }) validationMessage variable is not recognised. What could be the reason? I am using Cypress 12.12.0

"You may need an additional loader to handle the result of these loaders" when using import.meta

helpful-receptionist-4197

05/23/2023, 6:47 PM

https://stackoverflow.com/questions/76317770/cypress-typescript-you-may-need-an-additional-loader-to-handle-the-result-o (boosting my own question) I'm using Vue (although i don't think it's actually relevant), Cypress, and TypeScript. one of my files, foo.ts happens to access import.meta.url:

Copy code

// src/foo.ts
export const FOO = import.meta.url;

In my real code it uses import.meta.url to contrive the path to a file in the 'public' directory. Hard-coding "/path/to/whatever.json" works in prod but doesn't work in cypress component tests which is why i have to use import.meta.url. foo.ts works fine when imported by the web app and from component tests; problem is only when i also try to access it from cypress e2e test code.

Copy code

// cypress/e2e/example.cy.ts
import { FOO } from "../../src/foo"; // (also, how do i get the '@' prefix to work?)
describe('My First Test', () => {
  it('visits the app root url', () => {
    cy.visit('/')
    cy.contains('h1', 'You did it!')
  })
})

Tap WebAuthn Passkey Confirmation

red-horse-88299

05/23/2023, 7:47 PM

Hello, I'm using a virtual authenticator for WebAuthn based pass keys in my CI. Here's a code example:

Copy code

before(() => {
    Cypress.automation("remote:debugger:protocol", {
      command: "WebAuthn.enable",
      params: {
        enableUI: true,
      },
    }).then(() => {
      return Cypress.automation("remote:debugger:protocol", {
        command: "WebAuthn.addVirtualAuthenticator",
        params: {
          options: {
            protocol: "ctap2",
            transport: "internal",
            hasResidentKey: true,
            hasUserVerification: false,
            isUserVerified: true,
          },
        },
      }).then((result) => {
        _AUTHENTICATOR_ID = result.authenticatorId;
      });
    });

    cy.clearCookies();
    cy.visit(
      "/assets/polygon/0xE95C167E3147F2F935E6B90F16694BC9ED4399E4"
    );
  });

I'm able to successfully get a passkey modal to appear, but I do not know how to tap the button in the modal using Cypress. I've attached a screenshot. I appreciate any insight you may be able to provide. Thank you! -Brandon

https://cdn.discordapp.com/attachments/1110655231638917272/1110655231785713714/WebAuthn_Prompt.png▾

I wanted to skip /suppot/index.js steps for one spec file and should run for rest all other spec

mammoth-midnight-7435

05/23/2023, 8:30 PM

HI All , Can you someone please help me how i can exclude the settings that are mentioned in /support/index.js file for one particular file and run for rest all spec files .

Could put coverage report into Cypress Cloud?

important-noon-13871

05/24/2023, 4:10 AM

Our boss really cares about coverage report 😥 do you have any plan to add it in Cpyress ? And I also don't know how to use "npx cypress run" to generate coverage report for all e2e testing. All of my knowledge is from https://docs.cypress.io/guides/tooling/code-coverage#E2E-code-coverage:

Dropdown closes automatically

quiet-dream-68129

05/24/2023, 10:35 AM

I have a case in which I have to click on a dropdown, enter a search text in the search field and click on the option that matches the search text. The problem I have while using cypress is that the dropdown opens and immediately closes because of which the search term is not entered and the case fails. Can someone help me with what is going wrong here? I have tried adding wait() after click but it is not working. The logic I use here is: //click on dropdown(opens a list of elements with a search box) //wait //Enter search term in search box //Click on first option (because that is the only one matching the search term)