How to use tryConnect method in Cypress

Cypress allows you to stub network requests. When your application makes a request to a particular endpoint, you can intercept it to return a mocked response. You can either use fixtures for your mock response or just pass a plain object as the third argument to cy.request().

Your setup should be something like this:

it('should...', () => {

  cy.server();
  cy.visit('/');

  // load your mock data
  cy.fixture('me-mock.json').as('meJSON');
  cy.fixture('me-cats.json').as('catsJSON');

  // stub the two server requests to return your mock data
  // make sure you use the full URL
  cy.route('GET', serverUrl + '/users/me', '@meJSON').as('me');
  cy.route('GET', serverUrl + '3/gallery/r/cats', '@catsJSON').as('cats');

  // trigger the requests
  cy.get('#createSomething').click();

  // wait for both requests to resolve
  cy.wait(['@me', '@cats']);

  // then trigger more actions, make assertions, etc...

});

But make sure you use the full URL when defining the route.

The documentation states:

The <mat-slide-toggle> uses an internal <input type="checkbox"> to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the <mat-slide-toggle> element.

When Angular Material adds the switch, it adds a whole little hierarchy of elements under the outer <mat-slide-toggle> element; divs with classes like mat-slide-toggle-label, mat-slide-toggle-bar, etc. But it also adds a real (but hidden) <input> element.

The 'checked' test only applies to input elements (this is probably why your should('not.be.checked') tests are working--because non-input elements can never be checked. So, to use Cypress's should('be.checked') test, you need to tell Cypress to get a reference to the actual <input> contained within the <mat-slide-toggle>, and not one of the other mat-xxx elements.

Example:

cy.get('mat-slide-toggle#whateverId input').should('be.checked');
  // get reference to the single <input> inside the <mat-slide-toggle>

or:

cy.get('mat-slide-toggle#whateverId .mat-slide-toggle-input').should('be.checked');
  // get reference to the element with class "mat-slide-toggle-input" inside the <mat-slide-toggle> (which is the <input> itself)

In cypress, first() is a command that will be chained to .get() and retry for that whole selection until timeout. That is why you can't really obtain the native element from it.

You can however yield the command, and access the element inside .then() by passing a function to it.

For example, from the Cypress documentation on this EXACT question:

cy.get('.foo').then(($el) => {
  const el = $el.get(0) //native DOM element
})

There is the oneOf assertion if an exact match is is acceptable.

cy.get('element')
  .should('satisfy', ($el) => {
    expect($el.text()).to.be.oneOf([value1,value2])
  })
  .click()

It seems like indeed you have uploaded all the node_modules, but you didn't upload Cypress itself. Have you tried to run npm install or cypress install?

Besides, just FYI, Jenkins is only a continuous integration tool. It helps you manage tasks. All the commands still just run on your server :)

Cypress commands are pushed (enqueued) into a queue (called the Command queue --- which is basically an array), and then executed serially (one after another), and asynchronously.

While your cy.log() will be executed asynchronously, too, after the previous command, the value you pass to it (page1value) is passed/evaluated synchronously, at the time you push the command to the queue (which is evaluated at the time the callback passed to it() is called --- at the beginning of the test).

This is just regular JavaScript behavior, and has nothing to do with Cypress. All the commands cy.* are just methods (functions) on the cy object, and they're called immediately. What is not called (executed) immediately, is the logic that each command does (e.g. query the DOM for the selector you supply to cy.get(), log to Command log when you call cy.log('string'), etc.).

Thus, in your 2nd example:

1. You declare page1value.
2. You then immediately enqueue commands cy.get(), cy.invoke, cy.then().
3. And you also immediately enqueue cy.log, to which you pass page1value (which at this time is still undefined).
4. After all commands are enqueued, they start to execute, from top to bottom. When the cy.then command takes turn to execute, the page1value variable is assigned, but it's no longer used (read) anywhere for the rest of the test (recall that you've already read it when you passed it to the cy.log command in the previous step).

Thus, what you want to do instead, is:

cy.get('#selector').invoke('text').then(text => {
  cy.log(text);
});

In your 3rd example, if you alias something, you need to access that value using another command (remember, everything is asynchronous, so you can't access values that are set asynchronously, in a synchronous manner as you're doing), in this case cy.get('@aliasName'):

cy.get('#selector').invoke('text').as('page1value');
cy.get('@page1value').then( value => {
  cy.log(value);
});

Note that the above explanations are slightly inaccurate and inexhaustive (there are more things going on behind the scenes), for the sake of simplicity. But as an intro to how things work, they should do.

Anyway, you should definitely read Introduction to Cypress.

You may also take a look at my older answers that touch on related concepts:

• How to use a variable as a parameter in an API call in Cypress
• In Cypress when to use Custom Command vs Task?

Actually you want

• .invoke('html') to get .innerHTML
• .invoke('text') to get .innerText
• .invoke('val') to get the value property of an <input>

The solution is here: https://github.com/cypress-io/cypress/issues/7402 You have to upgrade cypress to version 4.6.0 and add

{
    "experimentalSourceRewriting": true
}

to cypress.json

The problem is with these two type defns in cypress.d.ts

// cypress.d.ts

/**
 * Get one or more DOM elements by selector.
 * The querying behavior of this command matches exactly how $(…) works in jQuery.
 * @see https://on.cypress.io/get
 * @example
 *    cy.get('.list>li')    // Yield the <li>'s in <.list>
 *    cy.get('ul li:first').should('have.class', 'active')
 *    cy.get('.dropdown-menu').click()
 */
get<E extends Node = HTMLElement>(
  selector: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<JQuery<E>>

/**
 * Get one or more DOM elements by alias.
 * @see https://on.cypress.io/get#Alias
 * @example
 *    // Get the aliased ‘todos’ elements
 *    cy.get('ul#todos').as('todos')
 *    //...hack hack hack...
 *    //later retrieve the todos
 *    cy.get('@todos')
 */
get<S = any>(
  alias: string, 
  options?: Partial<Loggable & Timeoutable & Withinable & Shadow>)
  : Chainable<S>

You can "fix" it by reversing the order,

// cypress/support/index.ts

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      // change the order of these two dfns
      get<S = any>(alias: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<S>
      get<E extends Node = HTMLElement>(selector: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<E>>
    }
  }
}

Now cy.get('@alias') types to any (because of get<S = any>), which is valid since aliases store any type.

But also the selector version is getting typed to any as well, it seems the identical type signatures make one of the defns redundant.

As Mikhail Bolotov points out, a different command name solves the issue, but I would define it as a custom command in /cypress/support/index.ts and call it getAlias since it has to work for any type.