How to use finalPropName method in Cypress

The decoder.scan method of @nuintun/qrcode use an Image class to create a (temporary) image element which it uses to do the scan.

Since it's an HTMLImageElement you can use it in the browser, but it does require a valid URL to the image.

However onAfterScreenshot($el, props) provides you with a full file path to the screenshot which cannot be accessed by the HTMLImageElement in the browser,
see the console error Not allowed to load local resource: file:///..../qrcode.png).

This is the way I was able to test it

import { Decoder } from '@nuintun/qrcode';

const qrcode = new Decoder();

it('decodes a qr-code', () => {

  cy.visit('my-page-with-qr-code')

  cy.get('img#image')                         // appropriate selector for image 
    .then($el => {
      const imagePath = $el[0].currentSrc;    // gives URL to image
                                              // e.g http://localhost:65206/app/qr-code.png
      qrcode.scan(imagePath).then(decode => {
        expect(decode.data).to.eq('https://www.cypress-qrcode.com')  // whatever qr is set to
      })
    })
})

.contains() is a Cypress function. As the doc page says, $el is a jQuery-wrapped element and not a Cypress-wrapped element, so .contains() will not work on it.

That said, .contains() is used to filter a selection and will return a chainer, not a boolean or a string, so this particular way of using .contains() would not work in the first place. This is a side effect of how Cypress queues its commands - see this doc page for more info.

For what you're trying to do, I suggest taking advantage of the native jQuery element:

//Selecting profiles
cy.get('.card')
    .each(($el) => {
        if ($el.text() === profile) {
            cy.wrap($el).click();
        }
    })

Note: I'm assuming profile is a string. If it is not, this code may need to be modified.

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

Does this button has different text? if yes, then use

cy.get('.sidebar--button').contains('whatever the text is').click()

I believe that the issue is inside your support/commands.js file. Review it for typos and possible parsing errors. Make sure you do not define commands inside of other commands by mistake.

You can access an array item (in your case it's the object) using the index position (in your case it's zero)

cy.get(".gLFyf").type(this.lead.result.records[0].Id)

It is very difficult to test a situation where an action has not occured. With this type of assertion, you can really only say:

"The XHR request was not made within the 400ms that Cypress looked for this XHR request to have been made (or whatever you set your timeout to be)"

This doesn't really confirm that the XHR request was never called.

That being said, Cypress offers a way to retrieve all XHR requests made using the undocumented cy.state('requests'). You could check the length of that, filter them by alias, etc to probably determine what you want.

Cypress has an event called url:changed. See doc on Events here

Using this, something like this may work:

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.location('hash').then(hash => {
                if (!url.endsWith(hash)) {
                    cy.visit(url);
                }
            });
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

Edit: just for troubleshooting purposes and to focus on your issue, can you try it like this without cy.location():

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.visit(url);
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

Edit: Have you tried cy.reload()

context("Workflow", () => {

    it("login", () => {

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.reload();
        cy.get(".subtitle").should("have.value", "Welcome");
    })
})

To anyone looking for how to solve this like I was:

For some reason Cypress(I am using 3.8.2 and I am not sure what version cypress-sql-server author was using) doesn't see the custom property of 'db'.

One method(you can do this many ways) is to just require the cypress config in the plugins file and reference your custom property from there.

To do this just change the plugins/index.js to look like this:

const sqlServer = require('cypress-sql-server');
const dbConfig = require('../../cypress.json');

module.exports = (on, config) => {
  tasks = sqlServer.loadDBPlugin(dbConfig.db);
  on('task', tasks);
}