.its() is just a shorthand for property extraction. Since it fails with the period, you could instead use bracket notation in a .then().

cy.wrap(paramObj)
  .then(paramObj => paramObj['timeline.ws'])

or just

cy.wrap(paramObj['timeline.ws'])

---

Playing around with the URL constructor

const urlString = 'http://example.com?timeline.ws=3600000&timeline.to&timeline.fm&timeline.ar=false'
const url = new URL(urlString)

cy.wrap(url.searchParams.get('timeline.ws'))
  .should('eq', '3600000')

cy.wrap(url.searchParams.get('timeline.to'))
  .should('be.empty')

cy.wrap(url.searchParams.get('timeline.ar'))
  .should('eq', 'false')

1. Is there a way to access to the last 'div' within 'rootDiv', check its class and based on it click any of the buttons?

It is possible to access the last 'div' within 'rootDiv': cy.get('.rootDiv div').last(). However, checking the class and then performing actions based on the value of the class is a bad idea, as it is conditional testing and Cypress was not really made for it. Nevertheless, if you really need this attitude (no other, better ways), I think it is doable.

2. Is there a way to get the 'text' written on the buttons of the last 'div'?

Yes, it is possible to get 'text' of last div. cy.get('.rootDiv div').last().invoke('text').then((textOnTheButton) => {console.log(textOnTheButton})

3.Is there a way to have a list of elements (buttons in this case) and iterate through them?

To get all of the buttons all you need is cy.get(button). If you want to iterate through all of them using index, you may use for loop and eq(), however it may not be the best/most efficient solution for all cases.

I had a similar problem and I find a workaround :

cy.get('input[data-cy=app-checkbox]')
  .parent()
  .click();

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

I can only guess that you have some cypress commands that must be completed before querying the selector. As cypress commands are asynchronous, your UI state is not ready when jquery is executed. Thus, you can make it executed synchronously with cypress commands as follows:

cy.then(() => {
   var elmText = Cypress.$('abc').eq(0).find('xyz').text()
   cy.log(elmText)
})

You can move your email value to /cypress/support/index.js and import into both tests.

Or define a custom command in /cypress/support/commands.js and avoid having to import it.

// cypress/support/commands.js

Cypress.Commands.add('getEmail', () => 'random@gmail.com')

// all tests

cy.getEmail().then(email => {
  ...
})

Unfortunately that makes a simple variable asynchronous and you have to access it with .then().

---

Environment variables for static data

If the data is static, you can define it as an environment variable,

In Cypress V9

// cypress.json

{
  ...
  "env": {
    "email": "random@gmail.com",
  }
}

In Cypress V10

// cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  projectId: '128076ed-9868-4e98-9cef-98dd8b705d75',
  env: {
    email: 'random@gmail.com',
  }
})

// all tests
const email = Cypress.env('email')

---

Actually, in Cypress v10 the config is now a javascript file so you should be able to set email via a function

// cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  projectId: '128076ed-9868-4e98-9cef-98dd8b705d75',
  env: {
    getEmail: () => { 
      return 'random@gmail.com';
    },
  }
})

// all tests
const email = Cypress.env('getEmail')()  // invoke the function

Problem

I understand the intention of the Gatsby documentation avoid executing useStaticQuery, but the approach implicitly recommends leaving code uncovered.

Recommendation

To achieve code coverage, the most logical thing to do would be to either mock useStaticQuery or better yet use MockProvider.

GraphQL Testing: MockProvider - https://www.apollographql.com/docs/react/development-testing/testing/#mockedprovider

It's a bad practice use waits in cypress. I'd suggest use the playground

https://docs.cypress.io/guides/core-concepts/test-runner.html#Selector-Playground

to find your items. Try to follow the Uniqueness principle and use the cy.get('[data-test-selector=you-selector']); instead of wait. It'll wait for you.

For example, visit and cy.get the title page.

Also, if you have animations, it might cause DOM issues with back and forth. If you remove them it'll be faster and more stable.

Apply a .filter() with a jQuery expression:

cy.get('li[data-testid="wrapper"]')
  .filter((i,li) => Cypress.$(li).find('p').length === 3 )
  .first()
  .click()

These alternatives also work:

.filter((i,li) => Cypress.$(li).find('.selections').children().length === 3 )
.filter((i,li) => Cypress.$(li).find('[data-testid^="selection"]').length === 3 )