Tearing Into a Pretty Bad Pizza Ordering Site
Red Pepper Pizza’s ordering system is a hot mess.
Luckily the establishment Red Pepper Pizza does not exist. This site is just a practice project that I built some years ago, as such the site offers up a useful exercise in using Selenium to find known flaws. This time I also like to use Selenium to simulate fairly complex user interactions and to catch a screenshot when a test assertion fails.
conftest.py
The fixture is now set to open the browser in full page size, using ChromeOptions . The reason being practical, as the screen recording stops at screen resize. ChromeOptions is imported to conftest and the two lines below are added.
options = ChromeOptions()
options.add_argument(“ — start-maximized”)Testing with risk of a flaky state
These two tests have very similar cases. Note the overlap highlighted in bold.
test_order.py
GIVEN The user is on Red pepper Pizza
WHEN he user clicks on the Add to order button below “Opera” AND The user clicks on the Add to order button below “Frutti di Mare”
THEN Opera and Frutti di Mare appears as order items in Your order
test_order_change.py
GIVEN The user is on Red Pepper Pizza AND A Blue and White pizza has been added to Your order
WHEN The user clicks the Delete button next to the order item
THEN the entire order is removed; both order item and sum.
The THEN conditions of the first test is pretty much identical with the GIVEN of the second test. The difficulty with setting such a state of an already ordered item for test_order_change.py is that I the best solution I could find still required a click event to get to the GIVEN.
js = "arguments[0].click();"
browser.execute_script(js, blue_white_menu_item_btn)I did use JavaScript to trigger the click event, but I would prefer a more reliable way of programmatically setting a state without relying on events.
For anyone interested in digging deeper into the topic Richard Bradshaw has plenty more to say about flaky tests and setting a state.
This is the test I expect to fail, and it exposes a flaw. Order items can be removed from the order with a delete button, but the error is that the sum of the order does not get removed. When the test fails a screenshot is taken.
try:
assert len(orders) == 0 and len(visible_order_footer) == 0
except Exception as e:
browser.save_screenshot("assert_order-deleted.png")
print(type(e))
raise eThe variable ‘order’ is xpath for any id order inside the div ‘order-items’. This should be empty. The order footer is populated with the sum of the order. Delete should remove both order item and order sum.
Selenium in action below:
Testing a pizza search
A key event is used to search for olives which will filter the menu.The test asserts that no more that two items are returned from the search results and that two pizzas do have olives.
I note how much logic is implied in the xpath itself. I give xpath responsibility not just to identify elements but also to verify the state of the element. I will ask for more opinions in this. The div ‘itemForm’ is by default visible as it displays the menu. Once a search event is triggered only matches should be displayed in the menu.
display_matches_xath = "//form[@class='itemForm'][@style!='display: none;']"ingredient_matches_xpath = "//form/p[contains(text(), 'olives')]"display_matches = browser.find_elements(By.XPATH, display_matches_xath)ingredient_matches = browser.find_elements(By.XPATH, ingredient_matches_xpath)try:
assert len(display_matches) == len(ingredient_matches)
except Exception as e:
browser.save_screenshot("assert_search_results.png")
print(e.args)
raise e
Should the menu be updated with say Pizza Acciuga, which would be incomplete without olives if you ask me, the test scales accordingly to assert that the number of pizzas with olives are equal to the number of pizzas in the filtered results.
Below is Selenium in action.
The complete repo can be found here.
