Autonomous web browsing agents in Agentic AI - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple autonomous web browsing agent that opens a webpage.

Agentic AI

agent = AutonomousAgent()
agent.[1]('https://example.com')

Drag options to blanks, or click blank then click option'

Arefresh_page

Bopen_url

Cclose_tab

Dclick_button

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods that interact with page elements instead of opening a URL.

Confusing refreshing or closing with opening a page.

The open_url method is used to navigate the agent to a specific webpage URL.

2fill in blank

medium

Complete the code to make the agent click a button identified by its CSS selector.

Agentic AI

agent.open_url('https://example.com')
agent.[1]('#submit-button')

Drag options to blanks, or click blank then click option'

Await_for_load

Btype_text

Cscroll_down

Dclick_element

Attempts:

3 left

💡 Hint

Common Mistakes

Using typing or scrolling methods instead of clicking.

Trying to wait for load instead of interacting.

The click_element method allows the agent to simulate clicking a page element like a button.

3fill in blank

hard

Fix the error in the code to correctly extract text from a page element.

Agentic AI

text = agent.get_element_text([1])

Drag options to blanks, or click blank then click option'

A['#main-title']

Bmain-title

C'#main-title'

Dmain_title

Attempts:

3 left

💡 Hint

Common Mistakes

Passing selector without quotes causing syntax errors.

Using variable names instead of selector strings.

The CSS selector string must be quoted to be passed correctly as an argument.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that maps element IDs to their text content.

Agentic AI

texts = {id: agent.get_element_text([1]) for id in ids if agent.element_exists([2])}

Drag options to blanks, or click blank then click option'

A'#' + id

Bid

C'#' + id.lower()

D'#' + str(id)

Attempts:

3 left

💡 Hint

Common Mistakes

Using the id variable without '#' causing selector errors.

Using inconsistent selectors in the comprehension.

To select elements by their IDs, prepend '#' to the id string in both places.

5fill in blank

hard

Fill all three blanks to filter links, extract their URLs, and store them in a list.

Agentic AI

links = [agent.get_element_attribute([1], [2]) for [3] in agent.find_elements('a') if agent.element_exists([1])]

Drag options to blanks, or click blank then click option'

Alink

B'href'

Cl

D'src'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong attribute names like 'src' for links.

Using inconsistent variable names in the comprehension.

Use a variable name like 'link' for each anchor element, get the 'href' attribute, and check if the element exists.

Practice

1. What is the main purpose of an autonomous web browsing agent?

easy

A. To automatically explore and interact with websites without human help

B. To manually browse websites faster

C. To replace web servers

D. To create websites from scratch

Solution

1. Step 1: Understand the role of autonomous agents

   They act automatically to perform tasks on websites without needing a person to control them.

2. Step 2: Compare options with this role

   Only To automatically explore and interact with websites without human help describes automatic exploration and interaction, which matches the agent's purpose.

3. Final Answer:

   To automatically explore and interact with websites without human help -> Option A

4. Quick Check:

   Autonomous means automatic = B [OK]

Hint: Autonomous means automatic, so pick the automatic action [OK]

Common Mistakes:

• Confusing manual browsing with autonomous
• Thinking agents create websites
• Assuming agents replace servers

2. Which of the following is the correct syntax to make an autonomous agent click a button with id 'submit'?

easy

A. agent.click('#submit')

B. agent.clickById('submit')

C. agent.pressButton('submit')

D. agent.clickButton('#submit')

Solution

1. Step 1: Identify common syntax for clicking elements

   Most agents use a method like click with a CSS selector string, e.g., '#submit'.

2. Step 2: Check each option's method and argument

   agent.click('#submit') uses click with '#submit', which is standard CSS selector syntax. Others use non-standard method names or incorrect selectors.

3. Final Answer:

   agent.click('#submit') -> Option A

4. Quick Check:

   Click method + CSS selector = D [OK]

Hint: Click uses CSS selectors like '#id' inside parentheses [OK]

Common Mistakes:

• Using method names not supported by agents
• Passing id without '#' selector
• Confusing click with pressButton

3. Given this code snippet for an autonomous agent:

agent.goTo('https://example.com')
agent.fill('#name', 'Alice')
agent.click('#submit')
print(agent.getLastResponseStatus())

What will be printed if the form submission is successful?

medium

A. 404

B. 500

C. 200

D. 0

Solution

1. Step 1: Understand HTTP status codes

   200 means success, 404 means not found, 500 means server error, 0 means no response.

2. Step 2: Analyze the code's last line

   The method getLastResponseStatus() returns the HTTP status of the last request, which should be 200 if submission succeeded.

3. Final Answer:

   200 -> Option C

4. Quick Check:

   Success status code = 200 [OK]

Hint: Success HTTP status is 200, always remember [OK]

Common Mistakes:

• Confusing 404 (not found) with success
• Thinking 500 means success
• Assuming 0 means success

4. You wrote this code for an autonomous agent:

agent.goTo('https://example.com')
agent.fill('name', 'Bob')
agent.click('#submit')

But the form never submits. What is the likely error?

medium

A. Agent cannot fill forms automatically

B. Using 'goTo' instead of 'navigateTo'

C. Click method should be 'press' instead of 'click'

D. Missing '#' in the selector for the fill method

Solution

1. Step 1: Check the selector used in fill method

   The fill method expects a CSS selector. 'name' without '#' targets a tag, not an id.

2. Step 2: Understand impact of wrong selector

   Without '#', the agent cannot find the input field with id 'name', so filling fails and form won't submit.

3. Final Answer:

   Missing '#' in the selector for the fill method -> Option D

4. Quick Check:

   CSS id selectors need '#' prefix [OK]

Hint: Always prefix id selectors with '#' in fill and click [OK]

Common Mistakes:

• Thinking goTo is wrong method
• Believing click method is incorrect
• Assuming agents can't fill forms

5. You want an autonomous web browsing agent to collect all links on a page and visit only those that contain the word 'news'. Which approach is best?

hard

A. Use agent.click('a') to click all links on the page automatically

B. Use agent.getLinks() to get all links, filter those with 'news' in URL, then agent.goTo() each filtered link

C. Use agent.fill('input', 'news') to search for news links

D. Use agent.submit() without filtering links

Solution

1. Step 1: Identify how to get all links

   The method agent.getLinks() returns all links on the page as URLs.

2. Step 2: Filter links containing 'news' and visit them

   Filter the list for URLs containing 'news', then use agent.goTo() to visit each filtered link.

3. Final Answer:

   Use agent.getLinks() to get all links, filter those with 'news' in URL, then agent.goTo() each filtered link -> Option B

4. Quick Check:

   Get links + filter + visit = A [OK]

Hint: Get all links, filter by keyword, then visit filtered links [OK]

Common Mistakes:

• Clicking all links blindly without filtering
• Using fill to search links incorrectly
• Submitting without selecting links