Cypress

• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A Cypress egy frontend teszt automatizáló eszköz.

Webhely

• https://www.cypress.io/ (2024)

Telepítés a projektbe:

npm install cypress --save-dev

Ellenőrzés:

npx cypress version

Ez a lépés legyárt egy konfigurációs fájlt és eyg cypress könyvtárat is, ami szükséges a futtatáshoz.

npx cypress open

npx cypress run

Futtatás fejjel:

npx cypress run --headed --no-exit

cypress/e2e/spec.cy.js

describe('Háromszög számoló', () => {
  beforeEach(function() {
    cy.visit('http://localhost:3000')
  })
  it('Bemenet 30 és 35-re, 525', () => {
    cy.get('#base').invoke('val', 30)
    cy.get('#height').invoke('val', 35)
    cy.get('#calcButton').click()
    .then( () => {
      cy.get('#area').should('have.value', '525')
    })
  })
})

Szerepel-e az oldalon:

  it('Alap szerepel az oldalon', () => {
    cy.contains('Alap')
  })
  it('Magasság szerepel az oldalon', () => {
    cy.contains('Magasság')
  })
  it('Terület szerepel az oldalon', () => {
    cy.contains('Terület')
  })
  it('Van button', () => {
    cy.get('button')
  })

Minimalista alatt, most azt értem, hogy nem használjuk a Cypress GUI felületét az „npx cypress open” paranccsal. Helyette magunk hozunk létre egy minimális konfigurációs fájlt.

Szükségünk van egy konfigurációs fájlra. Legyen a neve cypress.config.cjs, tartalma:

cypress.config.cjs

const path = require('path');
const { defineConfig } = require('cypress');
 
module.exports = defineConfig({
  // for e2e testing
  e2e: {
    supportFile: false,
    specPattern: path.resolve(__dirname, 'test/**/*.cy.js'), 
  }
});

A beállításnak megfelelően a teszt számára hozzunk létre egy test könyvtárat a projekt gyökérkönyvtárában, majd abban például egy app.cy.js tesztfájlt. A teszt tartalma:

test/app.cy.js

describe('Az első teszt', () => {
    it('A Valami szót tartalmazza?', () => {
        cy.visit('http://localhost:3000');
        cy.contains('h1', 'Valami');
    });
});

A példában feltételezzük, hogy a tesztelendő weblap a localhost:3000 címen érhető el.

A fenti példában látjuk, hogy kikapcsoltuk a supportFile lehetőséget. Ellenkező esetben meg kell adni hol van ez a fájl. Például:

supportFile: path.resolve(__dirname, 'cypress/support/e2e.js')

De akkor azt is létre kell hozni.

A futtatás lehetséges eredménye:

npx cypress run

DevTools listening on ws://127.0.0.1:39173/devtools/browser/bcb3ddff-e68e-41a2-ab16-71f397e47b93

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.13.1                                                                        │
  │ Browser:        Electron 118 (headless)                                                        │
  │ Node Version:   v18.19.0 (/usr/bin/node)                                                       │
  │ Specs:          1 found (app.cy.js)                                                            │
  │ Searched:       test/**/*.cy.js                                                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  app.cy.js                                                                       (1 of 1)


  Az első teszt
    ✓ URL megtekintése (582ms)


  1 passing (2s)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     2 seconds                                                                        │
  │ Spec Ran:     app.cy.js                                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  app.cy.js                                00:02        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:02        1        1        -        -        -  

cypress.config.cjs

const path = require('path');
const { defineConfig } = require('cypress');
 
module.exports = defineConfig({
  // for e2e testing
  e2e: {
    supportFile: false,
    specPattern: path.resolve(__dirname, 'test/**/*.cy.js'),
    baseUrl: 'http://localhost:3000'
  }
});

A tesztben ekkor elég ennyi:

test/app.cy.js

describe('Az első teszt', () => {
    it('A Valami szót tartalmazza?', () => {
        cy.visit('/');
        cy.contains('h1', 'Valami');
    });
});

Az e2e.js fájlban a tesztek plusz utasításokat adhatunk. Például legyen egy egyszerű naplózás ami futó böngészőben jelenik meg:

cypress/support/e2e.js

// cypress/support/e2e.js
beforeEach(() => {
    cy.log('This runs before each test');
});
 
afterEach(() => {
    cy.log('This runs after each test');
});

A támogató fájlokat meg kell jelölni a konfigurációs fájlban. Például:

cypress.config.cjs

const path = require('path');
const { defineConfig } = require('cypress');
 
module.exports = defineConfig({
  // for e2e testing
  e2e: {
    supportFile: path.resolve(__dirname, 'cypress/support/e2e.js'),
    specPattern: path.resolve(__dirname, 'test/**/*.cy.js'), 
    baseUrl: 'http://localhost:3000'
  }
});

test/app.cy.js

describe('A szit.hu webolda tesztje', () => {
    beforeEach(() => {
        cy.visit('/');
    });
    it('A programozás szóra van-e cpp a találatok között?', () => {       
        cy.get('input[name=q]').type('programozás');
        cy.get('button[type=submit][title=Keresés]').click();
        cy.get('body').should('be.visible');
        cy.contains('a', 'cpp');
    });
});

Ebben a példában az invoke() függvények helyett a type() függvényeket használjuk.

A weboldal:

src/index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Háromszög</title>
</head>
<body>
    <h1>Háromszög területszámítás</h1>
    <form id="triangleForm">
        <label for="base">Alap</label>
        <input type="number" id="base" name="base" required>
        <br>
        <label for="height">Magasság</label>
        <input type="number" id="height" name="height" required>
        <br>
        <button type="submit">Számít</button>
    </form>
    <br>
    <label for="result">Terület</label>
    <input type="text" id="result" name="result" readonly>
 
    <script type="module" src="app.js"></script>
</body>
</html>

JavaScript kód:

src/app.js

import { calcArea } from "./triangle.js";
 
function handleSubmit(event) {
    event.preventDefault();
 
    const base = parseFloat(document.getElementById('base').value);
    const height = parseFloat(document.getElementById('height').value);
 
    const area = calcArea(base, height);
 
    document.getElementById('result').value = area;
}
 
document.getElementById('triangleForm')
.addEventListener('submit', handleSubmit);

A konfigurációs fájl:

cypress.config.cjs

const path = require('path');
const { defineConfig } = require('cypress');
 
module.exports = defineConfig({
  // for e2e testing
  e2e: {
    supportFile: false,
    specPattern: path.resolve(__dirname, 'test/**/*.cy.js'), 
    baseUrl: 'http://localhost:3000'
  }
});

A teszt:

test/app.cy.js

describe('Háromszög területszámítás', () => {
    beforeEach(() => {
        cy.visit('/');
    });
    it('alap: 100, magasság: 150 bemenetre terület: 7500', () => {       
        cy.get('#base').type('100');
        cy.get('#height').type('150');
        cy.get('button[type=submit]').click();
        //megvárjuk amíg a body elem betöltődik:
        cy.get('body').should('be.visible');
        cy.get('#result').should('have.value', '7500');
    });
    it('alap: 30, magasság: 35 bemenetre terület: 525', () => {       
        cy.get('#base').type('30');
        cy.get('#height').type('35');
        cy.get('button[type=submit]').click();
        //megvárjuk amíg a body elem betöltődik:
        cy.get('body').should('be.visible');
        cy.get('#result').should('have.value', '525');
    });
});

describe.skip('My Test Suite', () => {
  it('should do something', () => {
    // Teszt kód
  });
 
  it('should do something else', () => {
    // Teszt kód
  });
});

describe('My Test Suite', () => {
  it.skip('should do something', () => {
    // Ez a teszt nem fog futni
  });
 
  it('should do something else', () => {
    // Ez a teszt futni fog
  });
});

describe.only('My Test Suite', () => {
  it('should do something', () => {
    // Fut
  });
 
  it('should do something else', () => {
    // Fut
  });
});

describe('My Test Suite', () => {
  it.only('should do something', () => {
    // Csak ez a teszt fog futni
  });
 
  it('should do something else', () => {
    // Ez a teszt nem fog futni
  });
});

Látogassuk meg a https://exapmple.cypress.io webhelyet, majd ellenőrizzük, hogy a h1 elemen belül szerepel-e a 'Sink' szót.

describe('Első teszt', () => {
  it('Oldal ellenőrzése', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('h1', 'Sink')
  })
})

• https://playwright.dev/
• https://appium.io/