Alex-Programer

{
	"e2e": "cypress open", // Open the client and manually select execution
	"test": "cypress run && cypress run --component" // Execute all test cases in the command line
}

cy.visit(url);

// This matching method can refer to the behavior of querySelector
cy.get(selector);

// Content matching, the following statement will match elements that contain the text "hello"
cy.contain('hello');

// Taking the click event as an example, other events can be triggered in the same way
cy.get(selector).click();

// In addition to triggering basic events, this method can also trigger events such as mousedown and mouseup to simulate complex user operations
cy.get(selector).trigger(eventName);

// This syntax is used to determine that the selected element should have the content "hello"
cy.get(selector).should('have.value', 'hello');

// Determine if the top value of the element is 10px
cy.get(selector).should('have.css', 'top').and('eq', '10px');

// Press and hold ctrl
cy.get('body').type('{ctrl}', { release: false });

// Release ctrl
cy.get('body').type('{ctrl}', { release: true });

// Start listening to an API
 cy.intercept({
    method: 'GET',
    // For example, to listen to /api/login?account=xxx, the syntax is: /api/login*
    url: `path of the API`, 
  }).as('test');

// Note: When the listening code starts executing, if the subsequent request behavior is not the one being listened to, an error will be reported. In other words, after starting to listen, you need to ensure that the subsequent requests are definitely the ones being listened to. Therefore, you cannot start listening at the beginning. The recommended approach is to start listening and immediately trigger a button click behavior to call the API.

// Get the request result of the API
cy.wait('@test')
	.its('response.body')
	.then(data => {
		cy.log(JSON.stringify(data));
	});

export const watchRequest = <T>(url: string, trigger: () => void, callback: (data: T) => void) => {
	cy.intercept({
		method: 'GET',
		url: `${url}*`,
	}).as(url);

	trigger();

	cy.wait(`@${url}`)
	.its('response.body')
	.then(data) => {
		callback(data);
	});
};

/**
* A certain page can be accessed normally
* @param url Page address
* @param requestCount Determine how many requests the page initiated are normal
*/
export const normalVisit = (url: string, requestCount = 30) => {
	cy.intercept({
		url: '*',
	}).as('apiCheck')

	cy.visit(url);

	Array(requestCount).fill('').forEach(() => {
		cy.wait('@apiCheck').then((interception) => {
			expect(Boolean(interception.response)).equal(true);
			assert.isNotNull(interception.response!.body);
			expect(interception.response!.statusCode).to.be.oneOf([200, 304])
		});
	});
}

// Modify the parameters of a GET request
 cy.intercept('/api/test*', (req) => {
	const request = JSON.parse(req.query as string);
	req.query.account = 2;
});

cy.wait(1000); // Wait for 1s

/// <reference types="cypress" />
/// <reference types="cypress-wait-until" />

declare namespace Cypress {
	interface Chainable<Subject> {
		/**
		* Check if an element exists
		*
		* @param selector Selector
		* @return Chainable<Subject>
		*/
		isElementExist(selector: string): Chainable<Subject>;
	}
}

/// <reference types="cypress" />
/// <reference types="cypress-wait-until" />

require("cypress-wait-until");

export function isElementExist(selector: string) {
	return cy
		.window()
		.then(($window) => $window.document.querySelector(selector));
}

Cypress.Commands.add("isElementExist", isElementExist);

cy.isElementExist(".shoe-id").then((value) => {
	if (value) {
		// ...
	} else {
		// ...
	}
}

{
	"username": "hello world"
}

cy.fixture('user').then(res => {
	console.log(res.username);
})