How to use s3helpers.verifyZipFileExists method in Cypress

You can achieve this with a custom command. You said you tried one and it didn't work, but I am doing something similar successfully in my tests.

Cypress.Commands.add("check403", () => {
  cy.get('[data-qa="http-error.section"]')
    .should('exist')
    .should('contain', '403'); // I changed this - you didn't mention that it
      // didn't work, but it would have been returning an element, not asserting
});

If re-enable happens only after POST response, add a delay to the intercept to allow enough time for cy.get('#edit-document-data-number').find('input').should('be.disabled') to pass.

cy.intercept('POST','**/api/update-data', {
  statusCode: 200,
  delay: 2000,                               // delay here, maybe shorter will work
  fixture: 'test_input_no_data.json'
}).as('updateData')

cy.visit("http://localhost:8080")
cy.get('tbody tr').eq(0).find('td').eq(8).find('button').click();  
cy.get('div[role="dialog"]').find('button').eq(1).click();  

cy.get('#edit-document-data-number input')  // select in one command 
  .should('be.disabled')                    // for retry of assertion

cy.wait('@updateData')

cy.get('#edit-document-data-number input')  
  .should('not.be.disabled')                 

cy.get('@updateData').then((interception) => { 
  ...

Why don't you directly target the input field using the following code

cy.get('input[name="teacher[0].number"]').type('8000-1612023')

Please find the screenshot below for a successful test. I would also recommend you to change the type of input in your HTML to tel

HTML:

<input required="" type="tel" name="teacher[0].number" value="">

Cypress:

describe('Trial', function() {
  it('Test', function() {
    cy.visit('http://localhost:8080/trials/')
    cy.get('input[name="teacher[0].number"]').type('8000-1612023')
  })
});

Test Result:

The method you are using is not recommended by cypress and is considered an anti-pattern. https://docs.cypress.io/guides/references/best-practices.html#Assigning-Return-Values

Cypress recommends that you add custom commands. https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax

In the initially created folder structure, the commands.js file can be found under the support folder. Here you are able to create a command that wraps up the logic you wish to reuse. Based on the console.log portion of your code I assume this is run on the command line. There are custom commands for the console as well as for use in the UI.

for that portion you may have to add this custom command

// not a super useful custom command
// but demonstrates how subject is passed
// and how the arguments are shifted
Cypress.Commands.add('console', {
  prevSubject: true
}, (subject, method) => {
  // the previous subject is automatically received
  // and the commands arguments are shifted

  // allow us to change the console method used
  method = method || 'log'

  // log the subject to the console
  console[method]('The subject is', subject)

  // whatever we return becomes the new subject
  //
  // we don't want to change the subject so
  // we return whatever was passed in
  return subject
})

For the other functionality creating commands is pretty simple, the basic pattern is:

Cypress.Commands.add(name, callbackFn)

so you can potentially create something like

Cypress.Commands.add(allNameBeforeInput, (options, options) => {
 //custom logic goes here

})

Then you can use it by calling cy.allNameBeforeInput(options, options).

For instance, I was struggling with login and all my tests had login functions to log in through the UI but I wanted to start my tests on the correct page instead of the the log in page. I added this to the command.js file in the support folder:

Cypress.Commands.add('login',(username="notsharingmyusernam@stackexchange.com", 
password="somesecurepasswordshhh") => {
 cy.request({
   method: "POST",
   url: "/api/public/login",
   body: `{:person/email "${username}", :person/password "${password}"}`,
   headers: {
     "Accept": "application/edn",
     "Content-Type": "application/edn"
   }
 })
})

And now I can add the cy.login and a beforeEach function at the beginning of my tests. The before each to make the request to the server and wait for the request for login and the cy.login custom command to ensure that I can use that bundled up logic with just one cy command.

describe('Test suite for page traverse', () => {
    beforeEach(() => {
        cy.server()
        cy.route("POST","/api/graphql").as("graphql")
        Cypress.Cookies.preserveOnce("company_jwt_qa") 
    })

     it('traverses all subnav items', () => {
        cy.login()
            cy.visit('/index.html')
            cy.wait("@graphql")
        cy.get('[data-tag-component="subnav-group"]')
            cy.get('[data-tag-component="subnav-title"]').eq(1).click()


    })
 })

@@/ looks like something that gets translated into a full path during the Nuxt build.
(ref The alias Property).

Cypress has a separate build that doesn't know about this Nuxt feature. You could try to replicate it with some webpack config via a preprocessor, but another way is to have your Nuxt app put a reference to lab_model on the window object

// somewhere in the Nuxt app
if (window.Cypress) {
  window.lab_model = LAB_MODEL;
}

then at the top of the test

const lab_model = cy.state('window').lab_model;

This has the benefit of giving you the exact same instance of lab_model, in case you wanted to stub something.

In a starter Nuxt app, I added the code window.lab_model = LAB_MODEL in /pages/index.vue, but you can add it in any component that imports it, right after the import statement.

In the spec add a .should() to test the property exists, to allow the app time to settle.

it('gets labModel from the Nuxt app', () => {

  cy.visit('http://localhost:3000/')

  cy.window()
    .should('have.property', 'lab_model')  // retries until property appears
    .then(labModel => {

      console.log(labModel)

      // test with labModel here
    })
})

The regex that applies is \[id="item\[\d+\].setupCost\].

Enclose the regex in forward slashes, not quotes.

cy.get(/\[id="item\[\d+\].setupCost\]/)

But don't use it

This syntax is undocumented - it works (in Cypress v9.5.0) but it only returns one result.

So if you want to count your items, this will fail

cy.get(/\[id="item\[\d+\].setupCost\]/)
  .its('length')
  .should('eq', 3)   // ❌

Partial attribute selector

If you want to use partial attribute selectors, this is strongest as it includes .setupCost

Ref Find the element with id that starts with "local-" and ends with "-remote"

cy.get('[id^="item"][id$=".setupCost"]')  // use "starts-with" and "ends-with" selectors

This succeeds with the count test

cy.get('[id^="item"][id$=".setupCost"]')
  .its('length')
  .should('eq', 3)   // ✅

You need to tell Typescript that some of parameters are optional:

// index.d.ts
declare namespace Cypress {
  interface JQuery<HTMLElement> {
    rsChoose(text?, num?, all?): JQuery<HTMLElement>
  }
}

Also if you use Typescript I recommend you to add types to your parameters ;)

I just found another approach in a blog, adding it here for reference.

const uuid = () => Cypress._.random(0, 1e6)
const id = uuid()
const testname = `testname${id}`
cy.get('input').type(testname);

worked well for me :)

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