Skip to content

Beginner

Skip to the problems!

Accessing the Browser

Let's jump right in. Opening a browser only requires a few lines of code 

import time as t
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://seleniumplayground.practiceprobs.com/")
t.sleep(10)  # Keep the window open a few seconds
driver.close()

Hello World Gif

How to use Selenium

As with all python code, you can execute Selenium scripts line-by-line, in chunks, or by running the entire script. Generally, though, you will want to do the latter. That way the process of opening the browser, accessing webpages and closing the browser again can occur without any manual interruptions that might interfer with the script.

Fundamental Concepts

Understand these fundamental concepts and your Selenium journey will go smoothly. Skip this section and prepare to struggle!

Webdriver

The webdriver is the underlying software with which Selenium accesses the web. It is a bridge that connects your python script to the browser. Most often ChromeDriver is used. Assuming it's installed, you can access it by

from selenium import webdriver

driver = webdriver.Chrome()

and you can open pages via

driver.get("https://www.foo.com/")

Generally, the webdriver is the main way of interacting with the browser. Most importantly, it's used to collect elements - Python representations of HTML elements. You can find them using a By instance, like this

from selenium.webdriver.common.by import By

driver.find_element(By.CLASS_NAME, "query")

which returns the first element where the HTML property class contains "query".

The By class contains multiple identifiers for targeting HTML elements such as By.ID, By.NAME, and By.CLASS_NAME. There are other ways to find elements which we'll explore in the challenges. First, though, how do we know what element belongs to which class, or extract underlying information about a selected element?

Element Inspection

Selenium doesn't see webpages as we do!

See what Selenium sees 🧐 
<!doctype html>
<html lang="en" class="no-js">
  <head>

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">

      <link rel="icon" href="assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.2.3, mkdocs-material-8.2.5+insiders-4.11.0">

        <title>Selenium Playground | Practice Probs</title>

      <link rel="stylesheet" href="assets/stylesheets/main.589a02ac.min.css">

        <link rel="stylesheet" href="assets/stylesheets/palette.e6a45f82.min.css">

        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>

      <link rel="stylesheet" href="stylesheets/extra.css">

    <script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>

  </head>

    <body dir="ltr" data-md-color-scheme="" data-md-color-primary="none" data-md-color-accent="none">

    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">


        <a href="#selenium-playground" class="md-skip">
          Skip to content
        </a>

    </div>
    <div data-md-component="announce">

    </div>
    </body>
</html>

Of course, this is very basic page. In reality HTML source code is typically much, much lengthier. In order to still be able to identify the elements we want to use, and find our way around the code, we can use Chrome's Inspect Element tool. It becomes available by right-clicking on any element. After we select this tool, we can dig through the different HTML elements, and the corresponding UI element is highlighted, assisting us in our search.

Inspect Element Gif

Previous Next