📐2. Cypress Kurulum

Bilgisayarınızda node.js yüklü değil ise ilk olarak node.js yüklememiz gerekiyor. Olup olmadığını kontrol edelim.

// node.js mevcut mu kontrolu
node -v

Kurulu olduğunu varsayip bir proje oluşturmak için ilk adımı atıyoruz

npm init --y

Kurulumdan sonra odaklanmış olduğumuz Cypressi devDependency olarak ekleyelim. Kurulum için npm kullanacağım. Aynı yarn, npm gibi package managerları destekliyor.

npm install cypress --save-dev

Mobile ve Desktop ayrımı

package.json dosyamızda altta belirtilen scriptleri ekleyiniz.

"scripts": {
    "cy:mobile": "cypress open --env isMobile=true --config viewportWidth=375,viewportHeight=812",
    "cy:desktop": "cypress open --env isMobile=false --config viewportWidth=1920,viewportHeight=1080"
},

Sonrasında cypress.config.js dosyamızı düzenleyelim.

module.exports = defineConfig({
	video: false,
	screenshotOnRunFailure: true,
	e2e: {
		baseUrl: "http://localhost:3000",
		setupNodeEvents(on, config) {
	            let userAgentValue = config.env.isMobile ? userAgent.mobile : userAgent.desktop
	
			on("before:browser:launch", (browser = {}, launchOptions) => {
				launchOptions.args.push(`--user-agent=${userAgentValue}`);
	                return launchOptions;
			});
		},
	},
});

Terminalden iki farklı platform içinde çalıştırabilir hale getirmiş olduk.

yarn run cy:mobile

yarn run cy:desktop