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:

.. code-block:: console

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

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

.. code-block:: console

        node_modules\.bin\cypress open


Egy Cypress teszt "csontváza" az alábbi:

.. code-block:: console

  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.

.. code-block:: javascript

   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ó:

.. code-block:: console

  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:

.. code-block:: console

  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 :command:`docker run -it --rm -p 8080:80 koczkaferenc/cypresstest:1` paranccsal!
#. Teszteld a működőképességét a :envvar:`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! (:command:`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.

.. code-block:: console

  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.

.. image:: images/chromedriver.png
  :alt: A Chromedriver letöltése
  :align: center

A web tesztelést egy hasonló feladaton keresztül végezzük el. Ehhez a Python :envvar:`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 :envvar:`File` > :envvar:`Settings` > :envvar:`Project` menüben a :envvar:`Python Interpreter` lapot, és a :envvar:`+` 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.

.. code-block:: console

  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")