Alex-Programer

{
	"e2e": "cypress open", // クライアントを開いて手動で実行する
	"test": "cypress run && cypress run --component" // コマンドラインですべてのテストケースを実行する
}

cy.visit(url);

// このマッチング方法は、querySelector の動作を参考にしてください
cy.get(selector);

// コンテンツのマッチング、以下のステートメントは、"hello" テキストを含む要素にマッチします
cy.contain('hello');

// クリックイベントの呼び出しを例にとりますが、他のイベントも同様に呼び出すことができます
cy.get(selector).click();

// この方法では、基本的なイベントだけでなく、mousedown、mouseup などのイベントもトリガーすることができ、複雑なユーザー操作をシミュレートすることができます
cy.get(selector).trigger(eventName);

// この構文は、選択した要素が "hello" の内容を持つ必要があることを判断します
cy.get(selector).should('have.value', 'hello');

// 要素の top 値が 10 px であるかどうかを判断します
cy.get(selector).should('have.css', 'top').and('eq', '10px');

// Ctrl キーを押し続ける
cy.get('body').type('{ctrl}', { release: false });

// Ctrl キーを離す
cy.get('body').type('{ctrl}', { release: true });

// 特定の API を監視する
 cy.intercept({
    method: 'GET',
    // たとえば、/api/login?account=xxx を監視する場合、書き方は：/api/login* です
    url: `インターフェースのパス部分`, 
  }).as('test');

// ここで注意してください。監視コードが実行されると、後続のリクエストがこの監視されたリクエストでない場合、エラーが発生します。つまり、監視を開始した後、次のリクエストがこの監視されたリクエストであることを確認する必要があります。したがって、最初から監視することはできません。推奨される方法は、監視後、次の行動がこの監視されたリクエストをすぐに監視できることを確認するために、例えば、ボタンのクリックイベントをトリガーしてこのインターフェースを呼び出すことです。

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

/**
* 特定のページに正常にアクセスできるかどうか
* @param url ページのアドレス
* @param requestCount ページが正常にリクエストを発行した回数
*/
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])
		});
	});
}

// GET リクエストのパラメータを変更する
 cy.intercept('/api/test*', (req) => {
	const request = JSON.parse(req.query as string);
	req.query.account = 2;
});

cy.wait(1000); // 1秒待つ

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

declare namespace Cypress {
	interface Chainable<Subject> {
		/**
		* 要素の存在をチェックする
		*
		* @param 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);
})