🦊13. Cypress XHR ile çalışma

XHR is XML HTTP Request.

XHR, XML HTTP İsteğidir. Bu bir Uygulama Programlama Arayüzüdür (API). yöntemleri bir web tarayıcısı ile sunucu arasında veri gönderen bir nesne olarak kullanılabilir. Bir nesnesi bir sunucudan yanıt biçiminde veri talep edebilir

//aliasing request
cy.request('https://jsonplaceholder.cypress.io/comments').as('c')

cy.get('@c').should((response) => {
   expect(response.body).to.have.length(100)
   expect(response).to.have.property('headers')
})

Mock api ile Response Api Kıyaslanması

Cypress/support/commands.js dizisi altında kodumuzu ekliyoruz.kul

Cypress.Commands.add("assertDeepEqual", (response, expectedData) => {
	const assertObject = (actual, expected, key) => {
		if (actual === undefined) {
			cy.log(`actual.${key} is undefined`);
		}

		if (actual === null) {
			cy.log(`actual.${key} is null`);
		}

		const actualType = typeof actual;
		const expectedType = typeof expected;

		if (actualType !== expectedType) {
			cy.log(`actual.${key} type ${actualType} is not equal to expected.${key} type ${expectedType}`);
		}

		try {
			expect(actualType).to.equal(expectedType);
		} catch (err) {
			throw new Error(`actual.${key} type ${actualType} is not equal to expected.${key} type ${expectedType}`);
		}

		if (actualType && actual && actualType === "object" && expectedType === "object") {
			const actualKeys = Object.keys(actual);
			const expectedKeys = Object.keys(expected);
			expect(actualKeys).to.deep.equal(expectedKeys);

			// eslint-disable-next-line no-shadow
			actualKeys.forEach((key) => {
				assertObject(actual[key], expected[key], key);
			});
		}
	};

	assertObject(response, expectedData);
});

Kullanım olarak mock datamızı alıyoruz ve dönen response ile oluşturduğumuz command'ı kullanıyoruz.

it("should data be match mock array", () => {
	cy.request({
		method: "GET",
		url: "https://porti.wtf/todo",
	}).then((response) => {
		cy.assertDeepEqual(response.body, mockTodoResponse);
	});
});