Hi. Today I attempt to run an existing

dockerfile

that I have, but I got this error:

shell
WARNING: The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested
It looks like this is your first time using Cypress: 10.3.1


Your system is missing the dependency: Xvfb

Install Xvfb and run Cypress again.

Read our documentation on dependencies for more information:

https://on.cypress.io/required-dependencies

If you are using Docker, we provide containers with all required dependencies installed.

----------

Error: spawn Xvfb ENOENT

----------

Platform: linux-x64 (Alpine Linux - 3.16.3)
Cypress Version: 10.3.1

My

dockerfile

looks like this:

dockerfile
FROM cypress/browsers:node16.14.2-slim-chrome100-ff99-edge
FROM artilleryio/artillery:latest

# Create the folder where our project will be stored
RUN mkdir /my-tests
RUN mkdir /performanceResults

# We make it our work-directory
WORKDIR /my-tests

# Let's copy the essential files that we must use to run our scripts. Right value means the destination
COPY ./package.json .
COPY ./package-lock.json .
COPY ./cypress.config.ts .
COPY ./cypress.env.json .
COPY ./cypress ./cypress
COPY ./performanceTests ./performanceTests 
COPY ./.env .

# Install the Cypress dependencies in the work directory
# `RUN npm install` was causing a problem at the moment to execute the dockerfile: 'No version of Cypress is installed in: /root/.cache/Cypress/10.3.1/Cypress'
# To solve that, I copied the `package-lock.json .` and I changed to the following command:
RUN npm ci

# Executable commands the container will use[Exec Form]
ENTRYPOINT ["npx", "cypress", "run"]
# CMD npx dotenv -- artillery run performanceTests/performance.yml

That error is curious because some weeks ago my

dockerfile

was working but today no. Is there a way to solve this?

i think the subject line says it all, just want to get the date and add numbers to it like get current date then have a new date thats one day ahead of the captured date to use and input into a text box.

we are working on 2 different Repositories in Local system, now I am creating 1 ProductID in 1st Repo & I need to use the Same ProductID in 2nd Repo. Anybody know how we can use it in 2nd repo in CYPRESS ?

With cypress 12, I executed my test cases few GET API are giving 500 status but manually they give 200 status.

import { defineConfig } from "cypress"; export default defineConfig({ projectId: "hxmqi2", chromeWebSecurity: false, execTimeout: 15000, taskTimeout: 15000, responseTimeout: 25000, pageLoadTimeout: 25000, defaultCommandTimeout: 20000, reporter: "cypress-multi-reporters", reporterOptions: { reporterEnabled: "cypress-mochawesome-reporter, mocha-junit-reporter", cypressMochawesomeReporterReporterOptions: { overwrite: true, reportFilename: "test-results", reportTitle: "Test Results", reportDir: "cypress/reports", charts: true, timestamp: "default", reportPageTitle: "My Test Suite", embeddedScreenshots: true, inlineAssets: true, }, mochaJunitReporterReporterOptions: { mochaFile: "cypress/reports/index.xml", }, }, screenshotsFolder: "cypress/reports/assets", videosFolder: "cypress/reports/videos", video: true, viewportWidth: 1920, viewportHeight: 1080, retries: { runMode: 1, openMode: 0, }, env: { updateSnapshots: true, }, e2e: { "cypress-watch-and-reload": { "watch": ["page/*", "src/*.js", "**/*.spec.js"], }, // We've imported your old cypress plugins here. // You may want to clean this up later by importing these. setupNodeEvents(on, config) { require("cypress-mochawesome-reporter/plugin")(on) if (config.env[config.env.TEST_ENV]) { config.env[config.env.TEST_ENV] = config.env[config.env.TEST_ENV].toLowerCase(); } else { console.info("Missing or invalid test environment. Setting to: dev"); config.env.TEST_ENV = "dev"; } config.baseUrl = config.env[config.env.TEST_ENV]; return config; }, testIsolation: false, }, });

I've attached an image for reference. From the documentation specPattern - A String or Array of glob patterns of the test files to load. Seems like specifying exact path doesnt work. I saw one solution to add imports in one file but Anyone has a different solution for this? Thanks in advance!

So guys, we have e2e tests written in cypress, and we also want to automate API testing, do you advise to use cypress for it? Or maybe to integrate with other tools for API testing?

I have this button "Pay invoices" and when I click on it I am redirected to another page (check print screen) and I am not able to take the data-test from the page. Any idea? Thx!

Hey gang. I was using cucumber and decided to migrate everything to native cypress syntax but I bumped into this. This is an example of one task I have.

cy.task("getUserEmail").then((user) => {
    user.email = user.email.replace("@ethereal.email", "+TC001" + faker.datatype.float() + "@ethereal.email")
    testEmail = user.email
    cy.get("#email").type(testEmail)
})

Quick explanation is I create a random new mailbox at project launch, and for each test I need a new account so I use "+TCXXX" and then a randomizer for retries. I'm declaring

testEmail

at the very beggining, outside of the describe block using

let testEmail;

which in any other case, it works fine. But in this case, after that task block is executed, testEmail becomes

undefined

. What am I doing wrong here? How can I store the value in the variable, and carry it outside of that function? Btw, this is the simples example, the more complex ones is sql queries, where I need to execute a task for the query, and store a bunch of info from that response in variables, to use on further steps of my test.

cy.get("").click({force:true}) is clicking wrong element Please check the screenshot attached here.

cy.get("table tbody tr") .then(($tr) => { return $tr .filter(

:has(td:nth-child(1):contains("${col1}"))

) .filter(

:has(td:nth-child(2):contains("${col2}"))

) .filter(

:has(td:nth-child(3):contains("${col3}"))

) .filter(

:has(td:nth-child(4):contains("${col4}"))

) .filter(

:has(td:nth-child(5):contains("${col5}"))

) .filter(

:has(td:nth-child(6):contains("${col6}"))

) .filter(

:has(td:nth-child(7):contains("DONE"))

); }) .should("have.length", 1); it finds two rows with same data instead of one

How can I test segment events with Cypress? since I don't see that they send network events ,so how can I track the events that are sending while performing some action in the web application https://segment.com/

how to resolve this Issue ? Till Yesterday, My script is working as expected. Suddenly from today I am getting this error. @nutritious-restaurant-91514

Hi, I have two spec files. For one I need to run --autoplay-policy=user-gesture-required chrome flag, for other --autoplay-policy=no-user-gesture-required. Currently handling it by running cypress run two times with different sets of flags, but there are some CI issues because of that, that I want to avoid. Is it possible to somehow change these flags during cypress run?

I'm trying to do

node --inspect-brk node_modules/cypress/bin/cypress open --dev --inspect-brk

. I am successul to spawn the DevTools in my Chrome for it. I than slowly step or jump to breakpoints but I get this error > Error: Cannot find module '\node_modules\scripts\start.js' End goal is I want to test some

nodejs

code that I have added in the

cypress.config.ts

such as reading a file with

readFileSync

before I export the working config from there. I don't want to rely to do

console.log

there since it's very daunting to work with

try and guess

rather than inspecting what values you get at anytime during app runtime. Please help cause no matter how many times and how long I have googled, there is no post, tutorial not even Cypress docs' do have any support in this matter.

Hello. I have a text field with a cursor set. I need to make sure that the cursor does not go anywhere after some actions. Is there an opportunity in Cypress to find out where the cursor is in the text field? Unfortunately, Google didn't help...

All of these assets keep being reloaded on each run of my cypress tests

I get Module not found: Error: Can't resolve 'sdk/theme/themes/[projectName]/src/js/cypress/support/component-index.html' because i have cypress located at sdk/tests/[projectName]/. How can i fix this problem without changing my project structure? for better understanding, my project structure is attached and content of my webpack.config file is:

js
const path = require('path');
const srcPath = path.resolve(__dirname + '/src/js')

module.exports = {
    context: srcPath,
    mode: 'production',
    watch: false,
    entry: {
        main: srcPath + '/styleguide/index.js'
    },
    output: {
        filename: 'styleguide-webpack.js'
    },
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: []

Hope anyone can help

Then I verify the below package details for the title "" |impressions|CPM|integrations| |444422 |13 |2000000|

Hey again. I'm working on a test for Multi factor authentication (I know). And what I need to do is: 1. Configure the 2fa with an email account. 2. Receive the email, get the code. 3. Go back to the screen where I'm setting it up and enter the code. The problem that I have is that I can't leave the 2fa screen between sending the email and entering the code. So, when I bring the Email to the screen to extract the code, I leave the input page, and there is no way to go back there. (I go back to the start of the setup process). So what I'm trying to do, is get the email, and parse the content in the back, extract the code, without bringing it up to the screen, so I can get the code en Input it without leaving the screen i'm at. My code is:

recurse(
  () = cy.task('getLastEmail'),
  Cypress._.isObject,
  {
    timeout: 60000,
    delay: 5000,
  },
)
.its('html')
.then((html) => {
  cy.document({ log: false }).invoke({ log: false}, 'write', html)
})

That gets the email, brings it up to the screen, and I can extract anything using regular cypress methods I assume this part

.invoke({ log: false}, 'write', html)

is what needs to change, but I'm not sure how can I do that. Just parsing the HTML and extracting the document but without actually showing the email in the browser, so I can remain in the screen I was at. Any ideas?

Hi all, I'm currently struggling on an issue in one of our tests. We have a wrapper component that loads in a Google Maps map and I'm trying to trigger our custom contextmenu with

.rightclick()

- but to no avail. Tried dispatching an event on the element itself, didn't trigger it either. What does work is executing the

.rightclick()

twice - but this does seem hacky.

When I run all my component cypress tests locally on a Macbook pro on a react-vite project with around ~10 tests, I get the following error:

An uncaught error was detected outside of a test:
     TypeError: The following error originated from your test code, not from Cypress.

  > Failed to fetch dynamically imported module: http://localhost:5173/__cypress/src/cypress/support/component.ts

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

the error is not Consistant and doesn't show up on every run. It also throws on a random test every run. How can I solve this?

Hey, i am trying to load an image file with the following code:

ts
  cy.fixture('test-image-1.png')
    .then((_) => (console.log('image 1?', _), _))
    .as('productTestImage1');
  cy.fixture('test-image-2.png').as('productTestImage2');

  cy.wait(['@productTestImage1', '@productTestImage2']).then((imageFiles) => {
    console.log('[[ fixture loaded? ]] /imageFiles:', imageFiles);
    forAPI.images = imageFiles;
  });

The file structure - which looks fine to me - is as on attached screenshot and yet Cypress throws an error that it's not able to locate the image file and logs don't show up. What could be the reason?

Hi all, Let's say I have two tests running one after the other, test #1 and test #2 #1 finishes. Sometimes there are still network requests going in/out of the application #2's beforeEach begins, which (1) clears my DB and (2) seeds by DB Sometimes these network requests still linger even after my DB is cleared in #2's beforeEach. This causes my application to throw an authentication error, as the requests are trying to check if they are from an authenticated session, but the DB is cleared --- Is there any way to prevent these requests from test #1 lingering into test #2's beforeEach? I know that Cypress has done this by design (https://docs.cypress.io/guides/references/best-practices#Dangling-state-is-your-friend)... but it seems harmful in this case. I would expect the "dangling state" to go away in the subsequent test's beforeEach

Hi, I have development e2e test with Cypress 12.4.0 (using Chrome) on local machine with this setup: - Vue.js v3 Frontend running on http://localhost:8080 using Vite server. Sends all backend API requests to http://localhost:3000 - Backend running on http://localhost:3000 with CORS setup to accept requests from http://localhost:8080. - cypress.config.ts content:

import { defineConfig } from 'cypress'

export default defineConfig({
  chromeWebSecurity: false,
  projectId: 'e1suq1',
  fixturesFolder: 'tests/e2e/fixtures',
  screenshotsFolder: 'tests/e2e/screenshots',
  videosFolder: 'tests/e2e/videos',
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require('./tests/e2e/plugins/index.js')(on, config)
    },
    specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
    supportFile: 'tests/e2e/support/index.js',
  },
  watchForFileChanges: false,
  viewportWidth: 1024
})

With Cypress 10.8.0 all my test were passing fine. With upgrade to version 12, I am getting CORS errors - but only in Cypress. (see screenshot) When I test my app outside Cypress (using it in any browser), everything works just fine. I tried to change interceptor backend calls to http://0.0.0.0:3000 and it worked, but that raised issues with cookies (as 0.0.0.0 is not localhost). I am stuck. Is there way to e2e test on this setup?

Hello! I'd like to be able to print the start time and name of a test to our node console via these hooks. Currently, we have a task:

beforeTest(testName) {
            console.log(
                colors.green(
                    `      ${getUTC()}: Start Time for Test (${testName}) ⏱️ `
                )
            )
            return null
        },

That is called in the

beforeEach

hook in our cypress/support/e2e.js file - this is also the same structure for our `afterTest`/`afterEach`. Using console.log in the test:before:run/test:after:run hooks, however, seems to only log it in the browser console, and you can't use tasks in these hooks. What can I do to make it print to the node console? Thanks in advance!

Is there a special way to create a spy on a normal method (no output)? The decription here does not seem to work in Angular https://docs.cypress.io/api/commands/spy

cy.spy(MyComponent, 'myMethod')

Or do i need a wrapper (with

`then`

)? I can not find any examples

Hey folks, I'm having a heck of a time. I've been using Cypress locally on my MacBook for some time and it's been going great. Lately my device has been having trouble, so I set up WSL on my PC so I could have a backup in case the worst were to happen. We use yarn to handle dependencies, and I used NPM to install Cypress and Yarn. Originally everything I was installing was going into a mounted virtual drive, where nothing was working. I eventually got it running off the linux directory, and Yarn and the dependencies installed fine. I also was able to install Cypress@9.5.4, which is the current version I'm using. Every time I try to run Cypress headed or headless, I'm being met with the following:

No version of Cypress is installed in: /home/workterminal/.cache/Cypress/9.5.4/Cypress

Please reinstall Cypress by running: cypress install

----------

Cypress executable not found at: /home/workterminal/.cache/Cypress/9.5.4/Cypress/Cypress

----------

A couple coworkers took a stab at it, and this is as far as we could get before I decided to reach out for help here. We got me off the mounted virtual drive, we got NPM and Yarn installed properly after using the linux directory, and then reinstalled Cypress using

yarn add cypress@9.5.4

, which completed successfully. We've tried expanding $PATH to include everywhere where Cypress exists, but it always looks in

.cache

. What can I do to toubleshoot further?

I was refactoring a code I did some time ago. My test looked like this:

typescript
describe('Shopping articles in the SWAG Labs store', () => {

  let items: object;

  beforeEach(() => {
    cy.visit('https://www.saucedemo.com/');
    cy.loginForm(Cypress.env('valid_user').username, Cypress.env('valid_user').password);

    cy.fixture("products").then((product) => {
      items = product;
    });
  });

  it('should purchase items from the store', () => {
    cy.get('.title').should('have.text', 'Products'); // Checking if I'm in the Products page

    // adding the items to the cart
    cy.addProductsToCart();
    cy.get('#shopping_cart_container').click();

    // checking the products I added
    cy.get('div[class="inventory_item_name"]')
      .then(($item) => {
        return (Cypress.$.makeArray($item)).map((el) => el.innerText)
      })
      .should('deep.equal', items);

    cy.get('#checkout').click();
    cy.checkoutForm('Eduardo', 'Videgaray', '89000');
    cy.get('#finish').click();
    cy.get('.complete-header').should('have.text', 'THANK YOU FOR YOUR ORDER')
  });
});

I decided to move the logic of checking if the products are already in the cart into a command. I did the following:

typescript
Cypress.Commands.add('validateProductsInCart', () => {
    let items: object;

    cy.fixture("products").then((product) => {
        items = product;
    });

    cy.get('div[class="inventory_item_name"]').then(($item) => {
        return (Cypress.$.makeArray($item)).map((el) => el.innerText)
    }).should('deep.equal', items);

    cy.get('#checkout').click();
});

but when I used that approach, my

items

variable came

undefined

. I put a log inside the fixture, just to see if my data was retrieved, and indeed: the data was retrieved. I put a log outside the fixture, and the

items

variable came

undefined

. I don't know why. The I tried using a

cy.wrap()

inside the fixture, but I got the same behaviour (

undefined

). (cont.)

Is this possible? I've tried a variety of ways and looked at some articles: https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/ https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b But none of them seem to work. Here's the iframe code I'm dealing with:

<iframe name="__privateStripeFrame9846" frameborder="0" allowtransparency="true" scrolling="no" role="presentation" allow="payment *" src="https://js.stripe.com/v3/elements-inner-card-42fc15cfef40ae0d4764d99e5790c6a8.html#fonts[0][family]=Lato&fonts[0][fontSmoothing]=antialiased&fonts[0][src]=local(%22lato%22)%2C+local(%22Lato%22)%2C+url(%22https%3A%2F%2Fassets-sharetribecom.sharetribe.com%2Fwebfonts%2Flato%2FLato-Medium.ttf%22)+format(%22truetype%22)&fonts[0][__resolveFontRelativeTo]=https%3A%2F%2Fapp-staging.solace.health%2Ffindadvocates%2Ftom-marren%2F637051b3-685c-4785-88ac-368cb579b6c6%2Fcheckout&wait=false&mids[guid]=NA&mids[muid]=NA&mids[sid]=NA&style[base][fontStyle]=normal&style[base][fontSmoothing]=antialiased&style[base][fontSize]=16px&style[base][lineHeight]=22px&style[base][color]=%23101010&style[base][::placeholder][color]=%23%235A5A5A&style[base][padding]=30px&rtl=false&componentName=card&keyMode=test&apiKey=pk_test_51LIcjvG7JPMVzIHCacZxdETXWVq1iQXEcLzT3XCgPLoxl0P1jPGfQ82tqQxCrpH9uySUJFdH051pSVmbNHRe7Q5700ebwAoJ7j&referrer=https%3A%2F%2Fapp-staging.solace.health%2Ffindadvocates%2Ftom-marren%2F637051b3-685c-4785-88ac-368cb579b6c6%2Fcheckout&controllerId=__privateStripeController9841" title="Secure card payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; transform: translate(0px) !important; color-scheme: light only !important; height: 24px;"></iframe>