How to use createSinglePemConfig method in Cypress

If you move the class .title into command .contains() it will focus solely on the element you wish to test, i.e two criteria will be tested in one command call and it will find the specific element.

cy.contains('.title', 'Hello').should('be.visible')

An example is given here Get Data URL of an image, but the image url is out of date - I substituted the one from Cypress Github page.

Key is to add encoding to the request

cy.request({
  url: 'https://cloud.githubusercontent.com/assets/1268976/20607953/d7ae489c-b24a-11e6-9cc4-91c6c74c5e88.png',
  encoding: 'base64',
}).then((response) => {

  // test any response properties here

  const base64Content = response.body
  const mime = response.headers['content-type'] // or 'image/png'
  expect(mime).to.eq('image/png')

  // see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
  const imageDataUrl = `data:${mime};base64,${base64Content}`
  return imageDataUrl
})
.then((imageDataUrl) => {

  // display the image in Cypress test runner

  cy.window().its('document.body')
  .then($body => {
    $body[0].innerHTML = `<img src="${imageDataUrl}"  height="100" width="300" />`
  })
})

You need to actually install the preprocessor in your project, not just its peer dependencies: npm install --save-dev @cypress/webpack-preprocessor

One approach is to get all your options then click one randomly

cy.get('#control-nationality').click()  // open the dropdown

cy.get('id^="option-nationality-"]')    // all elements with id starting "option-nationality"
  .then($options => {
    const count = $options.length
    const randomIndex = Math.floor(Math.random() * count)
    const randomOption = $options.eq(randomIndex) 
    cy.wrap(randomOption).click()
  })

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)
      });
    });

this command will wait the element:

cy.get('.auth').should('be.visible');

Add this command before interacting with it.

Worked it out:

cy.get('#mydatefield').type('2010-01-55')
    .should(($mydatefield) => {
        expect($mydatefield.get(0).checkValidity()).to.equal(false);
        expect($mydatefield.get(0).validationMessage).to.equal('Invalid date');
     });

HTTP_PROXY was added and Cypress.io should be able to work with your proxy with that set. I however still can't get our HTTPS to work, so its not totally working

Yes, there is. Cypress is actually running in the browser, and although commands are queued asynchronously, you can queue up native JS code to be run, like so:

cy.get("html").then(() => {
    document.querySelector("div.myDiv").innerHTML = "...";
    // ...
});

If you are trying to target or modify a specific element, you can get it via Cypress to take advantage of automatic retries to wait for the element to exist before operating on it:

cy.get("div.myDiv").then(elem => {
    elem.innerHTML = "...";
    // ...
});