js @ ФМИ

class: middle, center
# js @ ФМИ

---

# Тестване със Selenium

* от Георги Пенков
* от Цветан Цветанов

---

# Въведение

* Какво е Selenium
* Как се инсталира
* http://www.seleniumhq.org/
* Компоненти
* IDE (Extension)
* WebDriver
* SeleniumGrid

---

# IDE - т.е. интегрирана среда за разработка

![IDE](http://www.codediesel.com/wp-content/uploads/2008/10/selenium51.gif)

---

# IDE - елементи

![IDE](http://cdn2.softwaretestinghelp.com/wp-content/qa/uploads/2014/10/Selenium-IDE-6.jpg)

---

# IDE - изход към други езици

![IDE](http://4.bp.blogspot.com/-LWFLIodXHE4/UhOGboBEqqI/AAAAAAAAAQQ/ArNBa5lpod4/s640/selenium+ide2.png)

---

# WebDriver

* Обръща се директно към браузера и го ‘командва’
* Поддържани
  * Google Chrome
  * Internet Explorer 6, 7, 8, 9, 10 - 32 and 64-bit where applicable
  * Firefox: latest ESR, previous ESR, current release, one previous release
  * Safari
  * Opera
  * HtmlUnit
  * phantomjs
  * Android (with Selendroid or appium)
  * iOS (with ios-driver or appium)

---

# Видове автоматизация на уеб интерфейси

* **По стъпките на потребителя (с манипулация на DOM по събития/селектори)**
* По стъпките на потребителя (с разпознаване на картинки)
* Директно, чрез проиграване на HTTP(S) заявки (примерно с pylot или apr)

---

# Създаване на проба/сценарии

* Прави се, чрез т.нар среда за разработка, която по същество е добавка за браузера
* Именуване на пробата
* Първоначално проиграване на събитията
* Преглед на резултата (селектори, събития изчакване) - това е сложната част
* Генериране на пробата в Java/JS/Perl/Python и т.н. формат

---

# Как изглежда пробата в оригинал

```html
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">SampleTest</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>/</td>
    <td></td>
</tr>
<tr>
    <td>clickAndWait</td>
    <td>css=span.element-container.teal > span.element-content > span.element-heading</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>name=hospital</td>
    <td></td>
</tr>
</tbody></table>
</body>
</html>
```

---

# Как изглежда пробата в JS (2)

```javascript
var driver = new webdriver.Builder().build();
driver.get('http://www.google.com');

var element = driver.findElement(webdriver.By.name('q'));
element.sendKeys('Cheese!');
element.submit();

driver.getTitle().then(function(title) {
  console.log('Page title is: ' + title);
});

driver.wait(function() {
  return driver.getTitle().then(function(title) {
    return title.toLowerCase().lastIndexOf('cheese!', 0) === 0;
  });
}, 3000);

driver.getTitle().then(function(title) {
  console.log('Page title is: ' + title);
});

driver.quit();
```

---

# Как се ловят елементи ?

* Първо трябва да сме сигурни, че ги има
* ползваме CSS и XPATH
  * кратко инфо за CSS
  * кратко инфо за XPATH
* ако се налага се изчаква появата на елемента (waitFor)
* самата проба може да има и комплексна логика (пример по-натам)

---

# IDE - видове селектори

![IDE](https://techblog.constantcontact.com/wp-content/uploads/2013/08/Selenium-IDE-2.png)

---

# Някои основни аспекти на програмния интерфейс на Selenium

* click*, select* - автоматизиран клик
* key*, mouse*, sendKeys - изпращане на текст и събития на мишката
* pause, waitFor* - изчакване на елементи
* verify*, assert* - допускане, че даден елемент го има
* close - приключване
* submit - изпращане на форма

---

# Как работи изпълняването на проби от код

* Какво е “фантомен” браузер
* JSON заявки

---

# Демонстрация - как се прави проба

( демо )

---

# Демонстрация на изпълнение на проба с засичане на метрика

( демо )