How to use getVersions method in Cypress

I think you want to .forEach() on the incoming parameter properties

export const testRegistration = (options, buttonText) => {
      
  Object.keys(options).forEach(key => {
    cy.get(`input[name="${key}"]`).type(options[key])
  })
  return cy.contains('button', buttonText).click()
}

I'm not sure I'm getting the complete picture, but good skills checking Cypress.dom.isVisible($0).

You can use the exact same expression in your test by using .should() with a callback

cy.get('.price-total')
  .should($priceEl => {     // retries if necessary when expect fails

    expect(Cypress.dom.isVisible($priceEl).to.eq(true)

  })

I'm not sure this is definitive, have seen an Angular app (select control) where the parent was display: none but the child was visible to the user (ref Access element whose parent is hidden)

In this answer, a custom function is used to redefine the criteria for visibility. The trick is to figure out what to check for your app...

// Change this function if other criteria are required.
const isVisible = (elem) => !!( 
  elem.offsetWidth ||                          
  elem.offsetHeight || 
  elem.getClientRects().length 
)

You may just have a delay (e.g animation) before the parent element removes display: none.

Check the parent in the console, see if it eventually has a different display value.

In that case, first check the parent (not the child as Manuel says).

cy.get('td.item-total')
  .should('not.have.css', 'display', 'none')  
  .find('.price-total')
  .should($priceEl => {     
    expect(Cypress.dom.isVisible($priceEl).to.eq(true)
  })

I think there are two buttons with btn-primary class in your popup DOM (yes and cancel?). Try to access the yes confirmation button by its id or something. Or if you're sure about the order, then use .first() or .last() like you used for clicking the delete button.

Can you just wait on the filename?

cy.contains('[data-render-row-index="1"] > [data-col-index="1"]', filename, 
  { timeout: 30_000 }
)

If the reload is needed to get the correct row entry, a repeating function is a possibility

function refreshForData(filename, attempt = 0) {

  if (attempt > 30 ) {            // 30 seconds with a 1s wait below
    throw 'File did not appear'
  }

  // Synchronous check so as not to fail
  const found = Cypress.$(`[data-render-row-index="1"] > [data-col-index="1"]:contains('${filename}')`)

  if (!found) {
    cy.wait(1_000)
    cy.get('Reload button').click()
    cy.get('Spinner').should('not.be.visible')
    refreshForData(filename, ++attempt)
  }
}

refreshForData(filename)  // pass in filename, function can be globalized
                          // maybe also pass in selector?

I want to extract the balance at the beginning of the test

Comparing two numeric values, use a .then() to remove the currency and convert.

The .then() command is a useful way to apply javascript transforms to a value in a chain of Cypress commands.

cy.get('[data-testid="wallet"]')   
  .invoke('text')                                 // get text  "100 kr"
  .then(text => +text.replace('kr', '').trim())   // remove currency and convert
  .then(initial => {

    // spend 25 kr

    cy.get('[data-testid="wallet"]')
      .invoke('text')
      .then(text => +text.replace('kr', '').trim())
      .should('eq', initial - 25)
})

Since some of the code is repeated (and you will want other similar tests), bundle it up in a custom command

Cypress.Commands.add('currency', (selector) => {
  cy.get(selector)   
    .invoke('text')                                  // get text
    .then(text => +text.replace('kr', '').trim())    // remove currency and convert
})


cy.currency('[data-testid="wallet"]')
  .then(initial => {

    // spend 25 kr

    cy.currency('[data-testid="wallet"]')
      .should('eq', initial - 25)
  })

Note .invoke('text') extracts all text in the selected element and child elements.

If there are more children of the wallet than just the value, e.g

<div data-testid="wallet">
  <div>Amount: </div>
  <div class="css-3ro84u">100 kr</div>
</div>

you can add a .filter() to pick the currency child

Cypress.Commands.add('currency', (selector) => {
  cy.get(selector)   
    .children()
    .filter((index, child) => child.innerText.includes('kr'))   // filter
    .invoke('text')                                
    .then(text => +text.replace('kr', '').trim())               // convert
})

Your test should work as is if the css is loaded as part of the page. I'm not sure where it resides, so it's hard to make suggestion on that, but if you are just practicing testing, you could just include it in the html like this:

<style>
  .disabled {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: lightgrey;
  }
</style>

in addition, you could also test if the class is being added

describe("empty spec", () => {
  it("submit new headline", () => {
    cy.visit("http://localhost:8080/");
    cy.get('input[name="text"]').type("hahahahhahhhhhhhhhhhhhhhh");

    cy.get("#login").should("have.class", "disabled"); // is disabled?
    cy.get(".button").click();
    cy.get("#login").should("not.have.class", "disabled"); // is enabled?
    cy.get("#login").click();
  });
});

but, obviously, that's checking whether the class is added, not whether the link is actually disabled

I'm not really sure why you are using a task instead of a function, but you can simply add a property to the arguments you pass to the task:

on("task", {
    "gmail:get-messages": async args => {
      // Use the credentials property or an empty string if none is provided
      const credentialType = args.credentials || '';

      const messages = await gmail_tester.get_messages(
        path.resolve(__dirname, `credentials${args.credentials}.json`),
        path.resolve(__dirname, `gmail_token${args.credentials}.json`),
        args.options
      );
      return messages;
    }

And when you call your task you simply pass in the credentials type:

cy.task('gmail:get-messages', { options: {}, credentials: 'client' });

To make sure the value of number is passed on to the type, you have to add a then, something like:

let number

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber')
      .then((res) => {
        number = res.response.body.numbers.id
      })
      .then(() => {
        cy.get('#someELement').type(number)
      })
  })
})

If you want to use the variable globally throughout the project, you can use the Cypress.env() method. Cypress Docs.

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber').then((res) => {
      cypress.env('number', res.response.body.numbers.id) //Sets Number
    })
    cy.get('#someELement').type(Cypress.env('number')) //Gets Number and types it
  })

  it('some different test', () => {
    cy.get('#someELement').type(Cypress.env('number')) //types the number
  })
})

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