xpath diner

No worries, you've got this!

You're about to learn Xpath Selectors! Selectors are how you pick which elements to focus.

Exhibit 1 - A Xpath Selector

//Div[@class='header']

Here, the "//" and "Div" means it will check all paths until it finds a Div element in your document (XML/HTML). "[@class='header']" means the Div has to contain a class attribute with the value header.

To play, type in a Xpath selector in the editor below to select the correct items on the table.If you get it right, you'll advance to the next level.

Hover over the items on the table to see their HTML markup.

Get help with selectors on the right! →

Watch this video and check out this tutorial if you are a beginner! →

Ok, got it!
Help, I'm stuck!
console
xpath-editor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+
enter
{

/*
Type a number to skip to a level.
Ex → "5" for level 5
*/
table.html
HTML Viewer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Made by TopSwagCode — modified by vzcodes !

Have feedback or questions? Please file an issue on the GitHub repo.

Examples

Choose a level

Reset Progress