From bdc1c9e1372cfbea1d5b296b598819e2aecedf31 Mon Sep 17 00:00:00 2001 From: Labreo <74888611+Labreo@users.noreply.github.com> Date: Mon, 15 Sep 2025 23:58:09 +0530 Subject: [PATCH] Enhancement:Updated Functional Testing Section to Playwright --- .../6.5.2-functional-testing.md | 84 ++++++++++++++----- 1 file changed, 64 insertions(+), 20 deletions(-) diff --git a/docs/6-software-development-practices/6.5.2-functional-testing.md b/docs/6-software-development-practices/6.5.2-functional-testing.md index 3b1d78ff..a932dbdf 100644 --- a/docs/6-software-development-practices/6.5.2-functional-testing.md +++ b/docs/6-software-development-practices/6.5.2-functional-testing.md @@ -29,45 +29,89 @@ Functional tests are written from a user’s perspective. That is, you should be ## Example -One popular tool for functional testing website and web applications is Selenium. Selenium is a portable framework for browser automation. Selenium allows you to write declarative tests that programmatically interact with a website, checking functionality. This can be extremely helpful automating tests, allowing the same tests to be performed using all popular browsers. +One popular tool for functional testing of websites and web applications is Playwright. Playwright is an open-source framework for browser automation. It allows you to write tests that programmatically interact with a website, checking functionality. This is extremely helpful in automating tests, as the same tests can be performed across all major browsers. -An example of a use-case for Selenium would be testing a web application’s login form. Where a unit test might check that the email field only accepts valid email addresses, a functional test using Selenium might check that logging in with a valid email and password results in the user being logged in. +An example use case of Playwright is testing a web application’s login form. While a unit test might check that the email field only accepts valid email addresses, a functional test using Playwright could verify that logging in with a valid email and password successfully logs the user in. ## Exercise 1: -We will use Selenium and Python to run a couple functional tests on the bootcamp website. +We'll use Playwright and pytest to run functional tests. This approach is popular for its modern features, speed, and reliability. We'll manage our project's dependencies with uv.We're going to take this opportunity to introduce you to `uv` [\(docs\)](https://docs.astral.sh/uv/), a python tool somewhat similar to `npm` in the JavaScript ecosystem. -1. Install a Selenium WebDriver of your choice - * Firefox - `brew install geckodriver` - * Chrome - `brew install chromedriver --cask` - * Safari - built in -2. Install the [Selenium Python bindings](https://pypi.org/project/selenium/) +`uv` allows you to manage a python projects dependencies in a declarative manner (like `pip`), set up virtual python environments, declare required python versions, and more. + +1. Set up Your Project + First, install uv (a fast Python package manager). + + `brew install uv` + + Next, create a project directory and initialize a virtual environment with uv. - Read through the [Selenium Getting Started page](https://selenium-python.readthedocs.io/getting-started.html) to get a brief introduction on how to use Selenium. + `mkdir playwright-tests` -?> If you are getting an error when trying to install the Selenium Python bindings, look into [installing the packages in a virtual environment](https://packaging.python.org/en/latest/guides/installing-using-pip-and-virtual-environments/). + `cd playwright-tests` -3. Use the starter code provided to test + `uv init` + +2. Add Dependencies + Use uv to add Playwright and its pytest plugin to your project. + `uv add playwright pytest-playwright` + +3. Install Browser Drivers + Playwright requires its own browser binaries. Install them by running: + `uv run playwright install` + +4. Use the starter code provided to test * The link in the bottom right corner of the homepage takes you to [the bootcamp introduction](https://devops-bootcamp.liatr.io/#/1-introduction/1.0-overview) * The sidebar toggle button properly hides the sidebar -?> Note: the starter code has Firefox selected as the driver. Make sure to either change it or install geckodriver. +```python +import re +from playwright.sync_api import Page, expect + +BASE_URL = "https://devops-bootcamp.liatr.io" -[document](https://raw.githubusercontent.com/PaulDHenson/devops-bootcamp/master/examples/codeQuality/selenium-frame.py ':include :type=code python') +def test_bootcamp_link(page: Page): + """Tests that the 'Introduction to DevOps' link navigates correctly.""" + # go to the bootcamp site + page.goto(BASE_URL) + + # check we get expected page title + expect(page).to_have_title(re.compile("Welcome")) + + # find the link to Introduction to DevOps section + page.get_by_role("link", name=re.compile("Introduction to DevOps")).first.click() + + # check that we get the expected url + expect(page).to_have_url(re.compile(".*/1-introduction/.*")) + +def test_bootcamp_sidebar(page: Page): + """Tests that the sidebar toggle button works correctly.""" + # go to the bootcamp site + page.goto(BASE_URL) + + # check that the sidebar is shown (HINT: check html body attributes) + body = page.locator("body") + expect(body).not_to_have_attribute("class", re.compile("close")) + + # find the sidebar toggle and toggle it + toggle_button = page.locator(".sidebar-toggle").first + toggle_button.click() + + # after toggling sidebar, check that it is closed + expect(body).to_have_attribute("class", re.compile("close")) +``` While these are fairly trivial functional tests, they serve to show in general how they differ from unit tests. ## Exercise 2: -While Selenium is still in common use, [Playwright](https://playwright.dev/) is becoming more popular due to its ease of use. Furthermore, we're going to take this opportunity to introduce you to `uv` [\(docs\)](https://docs.astral.sh/uv/), a python tool somewhat similar to `npm` in the JavaScript ecosystem. +While [Playwright](https://playwright.dev/) is becoming more popular due to its ease of use,[Selenium](https://www.selenium.dev/) is still in common use. -`uv` allows you to manage a python projects dependencies in a declarative manner (like `pip`), set up virtual python environments, declare required python versions, and more. +1. Install a Selenium WebDriver of your choice.(`brew install geckodriver` for firefox.) +2. Install the Selenium Python bindings.(`pip install selenium`) +3. Write the same tests from Exercise 1, but this time using Selenium. -1. Install uv (`brew install uv`) -2. Create a new directory, and run `uv init` -3. Add Playwright's [python library](https://playwright.dev/python/docs/intro) with `uv add playwright pytest-playwright` -4. As mentioned in Playwright's docs, you will need to install some playwright specific browser drivers. To do so with `uv`, instead of installing playwright globally, you can do `uv run playwright install` -5. Write the same tests from Exercise 1, but this time using playwright. You can run the tests with `uv run pytest`, and `uv` will automatically run the process in a context that has all of the needed dependencies. +?>While Selenium is more established,the tests you write with it serve the same role:functional testing,not unit testing. # Deliverables