[[oktatas:web:javascript:javascript_teszt|< JavaScript teszt]]

====== Cypress ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A Cypress =====

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

Webhely
  * https://www.cypress.io/ (2024)
===== Telepítés =====

Telepítés a projektbe:

  npm install cypress --save-dev


Ellenőrzés:
  npx cypress version

===== Teszt készítése =====

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

{{:oktatas:web:javascript:javascript_teszt:cypress_gui_main.png?400|}}


<note tip>
A Cypress a teszteket alapértelmezetten a **cypress/e2e/** könyvtárban fogja keresi.
</note>
===== Csak futtatás =====

  npx cypress run

Futtatás fejjel:

  npx cypress run --headed --no-exit


===== Háromszög területszámítás tesztelése =====

<code javascript 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')
    })
  })
})
</code>


Szerepel-e az oldalon:

<code javascript>
  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')
  })
</code>

===== Minimalista teszt =====

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:

<code javascript 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'), 
  }
});
</code>

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:

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

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. 


==== Eredmény ====

A futtatás lehetséges eredménye:

<code>
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        -        -        -  
</code>

==== Alap URL ====

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

A tesztben ekkor elég ennyi:

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


==== Támogatási fájlok ====

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:

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


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

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

===== Kereső tesztelése =====

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

===== Háromszög területszámítás újra =====

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


A weboldal:

<code html 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>
</code>


JavaScript kód:

<code javascript 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);

</code>


A konfigurációs fájl:

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



A teszt:

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

===== Szelektálás =====

==== skip ====

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

  it('should do something else', () => {
    // Teszt kód
  });
});
</code>

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

==== only ====


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

  it('should do something else', () => {
    // Fut
  });
});

</code>

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

===== Gyakorlat =====

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.

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

===== Lásd még =====

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