chapter-3-ui-testing.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## UI Testing\n",
    "\n",
    "One of the most expensive automated test investments you have to do are UI Tests. For this notebook, we will be talking about how to automate Web UI tests using [Splinter](https://splinter.readthedocs.io/en/latest/) and [pytest](https://docs.pytest.org/en/stable/).\n",
    "\n",
    "### Splinter & pytest\n",
    "\n",
    "[Splinter](https://splinter.readthedocs.io/en/latest/) is an abstraction layer for [Selenium](https://www.selenium.dev/) that allows you to automate UI tests. All you have to do is select the webdriver (Browser) that you want, navigate, and interact with HTML DOM elements. Besides testing, Splinter can be used for scraping websites and write bots along with [Faker](https://pypi.org/project/Faker/).\n",
    "\n",
    "Interestingly there is also a [pytest-splinter plugin](https://github.com/pytest-dev/pytest-splinter) that makes it work along with [pytest](https://docs.pytest.org/en/stable/).\n",
    "\n",
    "For this example, we will use pytest and splinter to visit amazon.com and check for availability of **Kindle Paperwhite**.\n",
    "\n",
    "Prior to running the example, you need to install a Driver. This example uses the [Chrome WebDriver](https://splinter.readthedocs.io/en/latest/drivers/chrome.html). \n",
    "\n",
    "Just like the previous examples, it is important to execute the cell below to enable pytest execution within jupyter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipytest\n",
    "ipytest.autoconfig()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "%%run_pytest[clean] -svv\n",
    "import pytest\n",
    "\n",
    "@pytest.fixture(scope='session')\n",
    "def splinter_webdriver():\n",
    "    \"\"\"Select webdriver\"\"\"\n",
    "    return 'chrome'\n",
    "\n",
    "@pytest.fixture(scope='session')\n",
    "def splinter_headless():\n",
    "    \"\"\"\n",
    "    You can also run chrome webdriver in headless mode.\n",
    "    This is useful for running UI tests on a build system.\n",
    "    By default, this is set to False. Feel free to change it.\n",
    "    \"\"\"\n",
    "    return False\n",
    "\n",
    "@pytest.fixture(scope='session')\n",
    "def splinter_make_screenshot_on_failure():\n",
    "    \"\"\"\n",
    "    If you want splinter to take a screenshot on failures,\n",
    "    you can set it here. By default, this is set to True.\n",
    "    \"\"\"\n",
    "    return True\n",
    "\n",
    "def test_amazon_search(browser):\n",
    "    url = \"http://www.amazon.com\"\n",
    "    browser.visit(url)\n",
    "    # Locate the searchbox by id\n",
    "    searchbox = browser.find_by_id(\"twotabsearchtextbox\")\n",
    "    searchbox.first.fill(\"kindle paperwhite\")\n",
    "    # Alternatively, you can locate an element using xpath\n",
    "    # Locate the the searchbox submit button\n",
    "    button = browser.find_by_xpath('//*[@id=\"nav-search-submit-text\"]')\n",
    "    button.click()\n",
    "    # Check if there's kindle papewhite in the results\n",
    "    assert browser.is_text_present('kindle paperwhite'), \"kindle paperwhite not found!\"\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The example above makes use some of the pytest-splinter fixtures such as ```splinter_make_screenshot_on_failure``` to make sure that pytest will make a screenshot whenever there's a failed test.\n",
    "\n",
    "Another interesting fixture is ```splinter_headless```. When using chrome webdriver, you will be able to run the UI test headless. This can be set to True if ever you intend to run the test using CI tools like jenkins or AWS Codebuild.\n",
    "\n",
    "### Tip\n",
    "\n",
    "Splinter can query DOM objects in many ways. One of the useful ways to locate elements is by using [xpath](https://en.wikipedia.org/wiki/XPath). For complex websites such as amazon.com, running through the whole html source is pretty hard. Luckily, if you use Firefox, you can use the Web Developer Tools to copy the XPath when inspecting an element.\n",
    "\n",
    "![](images/xpath.png)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}