CSS attribute selectors in Selenium Python - Test Execution Trace

Test Overview

This test opens a webpage and uses a CSS attribute selector to find an input element with a specific placeholder attribute. It verifies that the input box is present and can be interacted with.

Test Code - Selenium

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import unittest

class TestCSSAttributeSelector(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Chrome()
        self.driver.get('https://example.com/form')

    def test_input_with_placeholder(self):
        driver = self.driver
        # Wait until the input with placeholder 'Enter your name' is present
        input_element = WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.CSS_SELECTOR, "input[placeholder='Enter your name']"))
        )
        # Check if the input is displayed
        self.assertTrue(input_element.is_displayed())
        # Enter text into the input
        input_element.send_keys('Alice')
        # Verify the entered text
        self.assertEqual(input_element.get_attribute('value'), 'Alice')

    def tearDown(self):
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts and Chrome browser opens	Browser window is open and navigated to https://example.com/form	-	PASS
2	Wait until input element with placeholder 'Enter your name' is present using CSS attribute selector	Page loaded with form containing input fields	Presence of element located by CSS selector input[placeholder='Enter your name']	PASS
3	Check if the input element is displayed	Input element is visible on the page	input_element.is_displayed() returns True	PASS
4	Send keys 'Alice' to the input element	Input element now contains text 'Alice'	-	PASS
5	Verify the input element's value attribute equals 'Alice'	Input element's value attribute is 'Alice'	input_element.get_attribute('value') == 'Alice'	PASS
6	Close the browser and end the test	Browser closed	-	PASS

Failure Scenario

Failing Condition: The input element with placeholder 'Enter your name' is not found within 10 seconds

Execution Trace Quiz - 3 Questions

Which CSS selector is used to find the input element in this test?

A input#name

B input[placeholder='Enter your name']

C input.classname

D input[type='text']

Key Result

Using CSS attribute selectors allows precise targeting of elements by their attributes, which is useful when IDs or classes are not unique or available.