Web tesztelés¶

A Cypress¶

A Cypress egy NodeJS-ben írt tesztelési keretrendszer. A futtatásához ezért a NodeJS-t kell először telepíteni. Ez a https://nodejs.org/en/download/ oldalról tölthető le.

Egy teszt készítéséhez először egy munkakönyvtárat érdemes létrehozni, majd abba telepíteni a Cypress-t:

mkdir webtest
cd webtest
npm install cypress --save-dev

A cypress elindítása az alábbi módon történik:

node_modules\.bin\cypress open

Egy Cypress teszt „csontváza” az alábbi:

describe('localhost:8080', () => {
    it('localhost:8080', () => {
          cy.visit('localhost:8080')
    })
})

Példa¶

Első, kicsit összetettebb példánk egy hibás név-jelszó kombinációval történő Neptun bejelentkezést tesztel.

describe('Neptun test', () => {
  it('passes', () => {
    //
    cy.visit('https://neptun.uni-eszterhazy.hu')
    // A Hallgatóknak szövegre kattintunk
    cy.contains('Hallgatóknak').click()
    // Megkeressük azt az elemet, amelynek id-je a linkStudentvolt szöveg,
    // eltávolítjuk az új ablak nyitásának paraméterét,
    // és rákattintunk.
    cy.get('a[id="linkStudentvolt"]').invoke('removeAttr', 'target').click()
    cy.get('input[id=user]').type('ABC123')
    cy.get('input[id=pwd]').type('alma')
    cy.get('input[id=btnSubmit]').click()
    cy.contains('Érvénytelen').should('be.visible')
  })
})

Példa¶

Egy egyszerű python Flask applikáció:

from flask import Flask
app = Flask(__name__)

@app.route('/')
@app.route ('/index')
def index():
return ('''
    Hello, this is the index page.<br>
    <a href="/greetings/feri">SayHello</a><br>
    <a href="/form">Form</a>
    ''')

@app.route('/greetings/<name>')
def greetings(name):
    return (f'Hello, {name}!')

@app.route('/form')
def form():
    return ('<input type="text" id="name">')

app.run(
    debug=True,
    port=5004
)

Ennek egyszerű tesztje:

describe('Flask Demo Test', () => {
  it('passes', () => {
    cy.visit('http://localhost:5004')

    // Test greetings link
    cy.contains('SayHello').click()
    cy.get('body').contains('feri')

    cy.visit('http://localhost:5004/form')
    cy.get('input[id=name]').type('Kiss Lajos')

  })

})

Feladat:¶

Egy másodfokú egyenlet megoldását végző website konténerizált változatát a Dockerhub a koczkaferenc/cypresstest:1 konténere tartalmazza. Töltsd le és indítsd el a docker run -it --rm -p 8080:80 koczkaferenc/cypresstest:1 paranccsal!
Teszteld a működőképességét a http://localhost:8080 weboldal megnyitásával!
Készíts egy tesztet, amely megnyitja ezt az oldalt! Használd ehhez a fenti „csontvázat”!
Mivel a tesztelendő website első változata már a megnyitáskor hibát jelez, állítsd le a konténert, és használd a 2-es verziót! (docker run -it --rm -p 8080:80 koczkaferenc/cypresstest:2)
Készítsd el a website első oldalán látható utasítások alapján a program tesztelését! Egy lehetséges megoldás az alábbi, de további cicomázások is végezhetők.

describe('localhost:8080', () => {
  it('localhost:8080', () => {
    cy.visit('localhost:8080')
    cy.wait(500)
    cy.contains('Másodfokú egyenlet').click()

    // 1 ---------------------------------------
    // A Megoldás szövegnek nem szabad látszania
    cy.get('div[id=solutionblock]').should('not.be.visible')

    cy.get('input[id=var-a]').type('1')
    cy.get('input[id=var-b]').type('6')
    cy.get('input[id=var-c]').type('8')
    cy.contains('Megoldás').click()

    // Meg kell jelennie a Megoldás szövegnek és a megoldásnak
    cy.get('div[id=solutionblock]').should('be.visible')
    cy.get('div [id=solutionblock]').contains('Mivel D, az egyenletnek két gyöke van: -2 és -4.')

    // Alaphelyzet
    cy.contains('Alaphelyzet').click()

    // 2 ---------------------------------------
    // A Megoldás szövegnek nem szabad látszania
    cy.get('div[id=solutionblock]').should('not.be.visible')

    cy.get('input[id=var-a]').type('1')
    cy.get('input[id=var-b]').type('-14')
    cy.get('input[id=var-c]').type('49')
    cy.contains('Megoldás').click()

    // Meg kell jelennie a Megoldás szövegnek és a megoldásnak
    cy.get('div[id=solutionblock]').should('be.visible')
    cy.get('div [id=solutionblock]').contains('Mivel D=0, az egyenletnek egy gyöke van: 7.')

    // Alaphelyzet
    cy.contains('Alaphelyzet').click()

    // 3 ---------------------------------------
    // A Megoldás szövegnek nem szabad látszania
    cy.get('div[id=solutionblock]').should('not.be.visible')

    cy.get('input[id=var-a]').type('1')
    cy.get('input[id=var-b]').type('6')
    cy.get('input[id=var-c]').type('8')
    cy.contains('Megoldás').click()

    // Meg kell jelennie a Megoldás szövegnek és a megoldásnak
    cy.get('div[id=solutionblock]').should('be.visible')
    cy.get('div [id=solutionblock]').contains('Mivel D, az egyenletnek két gyöke van: -2 és -4.')

    // Vissza a főoldalra
    cy.contains('Feladat').click()
    cy.location('href').should('eq', 'http://localhost:8080/?c=0')

    // Vissza a főoldalra
    cy.contains('a', 'Ellenőrzés megkezdése').click()
    cy.location('href').should('eq', 'http://localhost:8080/?c=1')

  })
})

A teljes dokumentáció ezen az oldalon érhető el: https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test#Add-a-test-file

Selenium¶

A Selenium tesztekhez le kell tölteni az adott böngészőhöz tartozó drivert, ezért példáinkban a Chrome-ot használjuk. A driver elérhető a https://chromedriver.chromium.org/downloads webhelyen.

A web tesztelést egy hasonló feladaton keresztül végezzük el. Ehhez a Python selenium moduljára is szükség lesz, ezért a pyCharm-ban a munka megkezdése előtt ezt a csomagot a projekthez hozzá kell adnod. Ehhez válaszd ki a File > Settings > Project menüben a Python Interpreter lapot, és a + megnyomásával add hozzá a listából a Selenium csomagot. Ez után már megírhatod a tesztelést végző programot.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.select import Select

driver = webdriver.Chrome(executable_path=r"/Users/koczka.ferenc/Downloads/chromedriver")
driver.get("http://localhost:8080")

login = driver.find_element(By.NAME, "login")
login.clear()
login.send_keys("admin")

passw = driver.find_element(By.NAME, "password")
passw.clear()
passw.send_keys("*****************")

submit = driver.find_element(By.NAME, "submit")
submit.click()

# Domain kiválasztása

driver.get("http://localhost:8080/?module=cISP&c=cPanel")
domain_select_element = driver.find_element(By.NAME, 'domain')
select_object = Select(domain_select_element)
select_object.select_by_visible_text('linux-szerver.hu')

submit = driver.find_element(By.NAME, "submit")
submit.click()

# E-mail címek kiválasztása
driver.get("http://localhost:8080/?module=cISP&c=mailList")

driver.get("http://localhost:8080/?module=cISP&c=mailForm&username=cert-oc")