How to use win.loadFile method in Cypress

Have you thought about maybe using cypress for this? They have a nice built in function that does exactly what you want and the setup Is really easy.

I’d recommend you using the cypress component testing for react, they have an entire page on their website’s docs explaining how to set it up. And than you can just mount the file selection component and use their cy.selectFile() method.

Good luck :)

The beforeEach() allows skipping.

Try this

  context("Conditional run", () => {
    let skip = false;
    before(() => {
        cy.get("div").then(($div) => {
            if (!Cypress.$("div[title='OK']", $comp).length) {
                skip = false
            } else {
                skip = true
            }
        });
    });

    beforeEach(function() {    // use regular function here
      if (skip) this.skip();
    })
  });

It might also work just putting the skip call in the before, since you want to skip all tests.

  context("Conditional run", () => {

    before(function() {    // use regular function here

        cy.get("div").then(function($div) {    // not sure if function is needed here
            if (Cypress.$("div[title='OK']", $comp).length) {
                this.skip();
            }
        });
    });
  });

You could use jquery operators to check the existence of an element and wrap that function as below, adding to your support.js file:

Cypress.Commands.add("checkIfClassExists", (classToFind) => {
    return Cypress.$(classToFind).length>0
})

Then in your tests:

if (cy.checkIfClassExists('.okrSelectorSelect__value-container')) {
    //do something
} else {
    //do nothing 
}

Can you approach it from the mocked data? Should be easier.

const data = {
  fulfillment: [
    ...
  ]
}

data.fulfillment.forEach(ff => {
  ff.details.forEach(detail => {
    const itemName = detail.item.itemName;
    cy.contains('h3', itemName)
      .next('.item-quantity')
      .invoke('text')
      .then(parseInt)
      .should('eq', detail.quantity)
  })
})

An alternative using Array.flatMap()

const flatData = data.fulfillment.flatMap(order => {
  return order.details.flatMap(orderItem => {
    return {
      name: orderItem.item.itemName, 
      quantity: orderItem.quantity
    }
  })
})
/*
 Yields
 [
   {name: 'Item name A', quantity: 3}
   {name: 'Item name B', quantity: 1}
   {name: 'Item name C', quantity: 6}
   {name: 'Item name D', quantity: 3}
   {name: 'Item name E', quantity: 9}
   {name: 'Item name F', quantity: 3}
   {name: 'Item name G', quantity: 4}
 ]
*/


cy.get('.ordered-item')
  .then($items => {
    return [...$items].map(item => {
      const $item = Cypress.$(item)
      const name = $item.find('h3').text().trim()
      const quantityText = $item.find('div[classname="item-quantity"]')
        .text().trim()
      const quantity = parseInt(quantityText)
      return {name, quantity}
    })
  })
  .should('deep.eq', flatData)

This is a better test because it checks there are no extra items on the page, and also check the order in the data is the same as the order on the page.

Yes, it looks like there is a good attempt to create a scenario recorder and it works to a great extent:

https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb/related?hl=en

The route listener must be set before the visit.

Substituting cy.intercept() which replaces cy.route() after Cypress v6.

cy.intercept('GET', 'fixture:car.json').as('getCar') // here I listen for the request

cy.visit('http://localhost:3000/cars/1234') 

cy.wait('@getCar') 

Try below fix to the clear section, the click trick should assure element won't be detached:

cy.get(inputField).click({force:true}).clear().type('Dummy 1');

This is the top result for this error so I would like to add what I did to fix it. This is relevant to version >=10 and typescript. The problem ended up being that the supportFile setting in cypress.config.ts was set to false; I changed my config to this:

import cypress, { defineConfig } from 'cypress'

export default defineConfig({
  
  e2e: {
    'baseUrl': 'http://localhost:4200',
    supportFile: 'cypress/support/e2e.ts'
  },
  
  
})

I created the custom commands in commands.ts

declare namespace Cypress {
  interface Chainable<Subject = any> {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
    */
     clearIndexedDB(): Promise<void>
  }
}

Cypress.Commands.add('clearIndexedDB', async () => {
  const databases = await window.indexedDB.databases();

  await Promise.all(
    databases.map(
      ({ name }) => {
        if (!name) return
        return new Promise((resolve, reject) => {
          const request = window.indexedDB.deleteDatabase(name);

          request.addEventListener('success', resolve);
          request.addEventListener('blocked', resolve);
          request.addEventListener('error', reject);
        })
      },
    ),
  );
});

Then I uncommented this line in my e2e.ts file

import './commands';

The /__/ portion of https://app.gotphoto.com/__/ is called the clientRoute and is an internal configuration item in Cypress.

You can turn it off in your cypress.json configuration file

{
  ...
  "clientRoute": "/"
}

This effectively keeps your original url and allows the page to load properly.

cy.visit('https://app.gotphoto.com/admin/auth/login')
cy.get('input#username', { timeout: 10000 }).type('admin') // long timeout
                                                           // wait for page to load
cy.get('input#password').type('password')

cy.intercept('POST', 'api.getphoto.io/v4/auth/login/user').as('user')
cy.contains('button', 'Submit').click()

cy.wait('@user').then(interception => {
  // incorrect credentials
  expect(interception.response.body.detail).to.eq('Login failed!')
})

I'm not sure of any bad side effects of changing clientRoute, will post more information if I find it.