How to use hideAllUnlessAnotherWindowIsFocused method in Cypress

Solved it on the application side:

//form submit()...
if (window.Cypress) {
  setTimeout(() => location.reload(), 3000);
}

This reloaded the app after the submit happened and the file was downloaded. While it isn't perfect, it works and isn't affecting the application. Many other things I've tried on Cypress like catching the exception, didn't work either.

Two mistakes in your code.

First: Input does't have innerHTML but value. Second You are assigning integer to zipcode starting with zero. Rather you need a string type because value returned by input will be a string.

use this code

var filter = document.getElementById('zipcode');
var JSONtbl = [
		{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
		{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
		{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
	     ];
filter.onkeyup = function() {
    var zipcodeToSearch = filter.value;
    var n = zipcodeToSearch.length;
    if (n < 5) {
    	document.getElementById("address").value = "";
    	document.getElementById("County").value = "";
    } else {
        for (var i = 0; i < JSONtbl.length; i++) {
            
        	if (JSONtbl[i].zipcode == zipcodeToSearch) {
           
        		document.getElementById("address").value = JSONtbl[i].address;
        		document.getElementById("County").value = JSONtbl[i].County;
             }
        }
        if (document.getElementById("address").value == "") {
            alert("ZipCode Out Of Area")
        }
    }
};

div {
    padding: 2px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>

You can use jQuery's contains selector to find the desired h1 based on text inside it. Once h1 is found, just select its parent which will be your anchor.

let targetH1 = $('a h1:contains("Visit Site")');

console.log(targetH1.parent()); // this will give you the anchor element

Since class="Item" is the common factor, use a cy.get() with retry on the count of it.

cy.get('.Item').should('have.length', 2)

After a plentitude of being angry at my keyboard, I have found the winning solution.

Using invoke you can store the value of an attr like src, as shown here: https://docs.cypress.io/api/commands/invoke.html#Arguments-are-automatically-forwarded-to-the-function

So, after a few tweaks to the above attempts, I found this to work perfectly:

    cy.get('.image-root img').invoke('attr', 'src').then((firstSrc) => {
      const src1 = firstSrc

        /**
         * File drop 2mb jpg
         */
        cy.fixture(Cypress.env("JPG_2MB"), "base64").then(fileContent => {
          cy.get(".dropzone").upload(
            {
              fileContent,
              fileName: "sampleimage.jpg",
              mimeType: "image/jpeg"
            },
            { subjectType: "drag-n-drop" }
          );
        });

        cy.wait(16000);

      cy.get('.image-root img').invoke('attr', 'src').then((nextSrc) => {
        expect(nextSrc).to.not.equal(src1)
      });
    });

You shouldn't mix .js and .ts in a Typescript project.

Make everything .ts, then add the index.d.ts with a type definition for your custom command.

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

declare namespace Cypress {
  interface Chainable<Subject = any> {
    login(): Chainable<any>;
  }
}

You may run into more problems, for example check if you have a tsconfig.json in the /cypress folder.

If in doubt, use cypress-realworld-app as a reference for Typescript setup.

For me mouseover works. It's a known Cypress bug pending to be solved. However, try these:

cy.get('#gh-Alerts-i').trigger('onmouseover')
cy.get('#gh-Alerts-i').trigger('mouseenter')
cy.get('#gh-Alerts-i').invoke('trigger', 'contextmenu')
cy.get('#gh-Alerts-i').rightclick();

It appears to me that you are calling cypress in tfs agent (test runner) from a remote machine (\\phasp13jm29) which potentially a mis-usage. In a nutshell, cypress is nodejs package. By that said, you need to install nodejs and cypress in tfs agent. You may want to check out cypress system requirements for further details.

To fulfill the pipeline, you also need to make sure cypress test scripts are available in tfs agent (by copying them over network or git checkout or your own way).

The last step is to kick of the test execution by calling npx cypress run with appropriate flags and/or configuration or npm run test (from your package.json).

Just my 2 cents and I hope it's somewhat helpful for you.

Your code seems to run ok on the ng-file-upload demo page.

I also tested with an 'xlsx' file, no problem found.

describe('Angular file upload Demo', () => {

  /*
    To run these tests, add a file 'logo.png' to /cypress/fixtures
  */

  it('uploads the fixture file', () => {
    cy.visit('')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').then(subject => {
      return cy.fixture('logo.png', 'base64')
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
          console.log('blob', blob)
          const el = subject[0]
          if (el != null) {
            const testFile = new File([blob], 'logo.png')
            const dataTransfer = new DataTransfer()
            dataTransfer.items.add(testFile)
            el.files = dataTransfer.files
          }
          return subject          
        })
    })

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

  Cypress.Commands.add('uploadFile', { prevSubject: 'element' }, (subject, fileName) => {
    console.log('subject', subject)
    return cy.fixture(fileName, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        console.log('blob', blob)
        const el = subject[0]
        if (el != null) {
          const testFile = new File([blob], fileName)
          const dataTransfer = new DataTransfer()
          dataTransfer.items.add(testFile)
          el.files = dataTransfer.files
        }
        return subject          
      })
    }
  )

  it('uploads the file via custom command', () => {
    cy.visit('')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').uploadFile('logo.png')

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

})