Developer Tools: Basic Testing

Testcases

Inspect element

Testcase Steps Expected Result
Show as tab feature
  1. Visit http://news.google.com.
  2. Right-click the page and select Inspect element.
  3. Click the drop-down arrow in the title bar to show options.
  4. Click Show as tab.
A separate new tab window will open.
Open browser window feature
  1. Visit http://news.google.com.
  2. Right-click the page and select Inspect element.
  3. Click the drop-down arrow in the title bar to show options.
  4. Click Open browser window.
A new tab attached to current browser window will open.
Highlight Code
  1. Visit http://news.google.com.
  2. Right-click the page and select Inspect element.
  3. Mouseover any line of code in the inspector.
The corresponding content will be highlighted on the web page.
HTML code selection
  1. Visit http://news.google.com.
  2. Right-click a specific element, such as an image or section of text.
  3. Select Inspect element.
That element's code will be highlighted in the inspector.

JavaScript debugger commands

Test case
Steps Expected Result
break
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
Break point should be set at sort_insertion function.
Output:
set breakpoint #1
paused at breakpoint 1: sort_insertion(sort=#<a Sort>, x=186, y=103), http://html.tests.googlepages.com/sort-insertion.js
5: if (arguments.length == 1 || x == undefined) {
source
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute source command.
Source command should print function source.

Output:

1: // insertion sort
2:
3: function sort_insertion(sort, x, y) {
4: //throw("test exception"); >>>> if (arguments.length == 1 || x == undefined) { 6: x = 1; y = 1;
7: }
8: var len = sort.bars.length;
9: if (x < len && y > 0) { 10: if (sort.compare(y, y - 1) < 0) { 11: sort.swap(y, y - 1);
break_info
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute break_info command
break_info will list information about break points : # of break points, ids, hit count, type and target.
Output:
Num breakpoints: 1
id=1, hit_count=1, type=function, target=sort_insertion
scripts
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute scripts command.
scripts will print all scripts listed on the webpage Output:
[unnamed] (source:"")
[unnamed] (source:"")
http://html.tests.googlepages.com/sort.js (lines 356)
http://html.tests.googlepages.com/sort-bubble.js (lines 24)
http://html.tests.googlepages.com/sort-insertion.js (lines 29)
http://html.tests.googlepages.com/sort-quick.js (lines 35)
http://html.tests.googlepages.com/sort-heap.js (lines 53)
http://html.tests.googlepages.com/sort.html (lines 12-58)
http://html.tests.googlepages.com/sort.html (lines 57-65)
args
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute args command
args command summarizes the arguments to the function in the current frame.

Output:
sort = #<a Sort> x = 186 y = 103
locals
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute locals command.
Prints locals in the current frame. In this example there are none.

Output :
len = undefined arguments = #<an Object> .arguments = #<an Object>
backtrace
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute backtrace command.
prints out a backtrace of your current call stack.

Output:
Frames #0 to #3 of 4:
#00 sort_insertion(sort=#<a Sort>, x=186, y=103) http://html.tests.googlepages.com/sort-insertion.js line 5 column 16 (position 102)
#01 [anonymous]() http://html.tests.googlepages.com/sort-insertion.js line 24 column 35 (position 502)
#02 #<a Sort>.stepper() http://html.tests.googlepages.com/sort.js line 107 column 7 (position 2717)
#03 [anonymous]() http://html.tests.googlepages.com/sort.js line 83 column 45 (position 2028)
next
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute next command.
will print next line (from the current line - which is paused).

Output :
8: var len = sort.bars.length;
frame
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute next command.
  7. Execute frame # command (say frame 0).
Sets the current frame to the specified stack frame number and display information about that frame.

Output :
#0 sort_insertion, http://html.tests.googlepages.com/sort-insertion.js
8: var len = sort.bars.length;
step
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute next command.
  7. Execute frame # command (say frame 0).
  8. Execute step command (for example, execute step command thrice).
Single step into a current line.
Output:
After 1st step command
9: if (x < len && y > 0) {
After second step command
10: if (sort.compare(y, y - 1) < 0) {
After third step command
#<a Sort>.compare(x=103, y=102), http://html.tests.googlepages.com/sort.js
295: var bx = this.bars[x];
stepout
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute next command.
  7. Execute frame # command (say frame 0).
  8. Execute step command (for example, execute step command thrice).
  9. Execute stepout command.
continue execution and stop when control returns to the calling stack frame.
Output:
sort_insertion(sort=#<a Sort>, x=186, y=103), http://html.tests.googlepages.com/sort-insertion.js
11: sort.swap(y, y - 1);
clear
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute clear # (eg. clear 1).
clears a specific breakpoint number, so it's no longer triggered.
Output:
cleared breakpoint #1
continue
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute clear # (eg. clear 1).
  7. Execute continue.
continues program execution. in this example it will continue sorting insertion sort bars.
help
  1. Launch Google Chrome.
  2. Visit  http://html.tests.googlepages.com/sort.html
  3. Press Alt+` to launch the JavaScript debugger.
  4. Start Insertion sort by clicking on the green bars.
  5. Execute break sort_insertion before the sorting is complete.
  6. Execute clear # (eg. clear 1).
  7. Execute continue.
  8. Execute help command.
Will list the available commands after pause.
Output:
Available commands:
args break [location] <condition> break_info [breakpoint #] backtrace [from frame #] [to frame #] clear <breakpoint #> continue frame <frame #> help [command] locals next print <expression> scripts source [from line] | [<from line> <num lines>] step stepout
print <expression>
  1. Launch Google Chrome.
  2. Visit http://www.google.com .
  3. Press Alt+` to launch the JavaScript debugger.
  4. Execute print document.title="hello"
  5. Execute print document.body.bgColor="purple"
After Step 4 : page title will change from Google to hello
Output:
print document.title
hello

After Step 5: background color of webpage will change from white to purple.

Output:
print document.body.bgColor
purple
Terminate debugger's connection with a tab
  1. Launch Google Chrome.
  2. Open multiple tabs.
  3. From one of the tabs, visit http://www.google.com .
  4. Press Alt+` to launch the JavaScript debugger.
  5. Close the tab.
lost connection to tab
Continue JavaScript execution by ending connection with JSD
  1. Launch Google Chrome and navigate to http://html.tests.googlepages.com/sort.html
  2. Press Alt+` to launch the JavaScript debugger.
  3. From the page above, click Start All.
  4. Execute the 'break' command.
  5. The JavaScript execution (sorting) will be paused
  6. Close the debugger.
JavaScript execution (sorting) will continue


View source

Test case
Steps Expected Result
View Source by right click
  1. Visit http://www.google.com.
  2. Right-click anywhere on the page and select View page source.
The source view will open in a new tab.
View Source by adding view-source: before url
  1. Enter view-source:http://www.google.com/ into the address bar and press Enter.
The source view will be displayed.
Clickable links in View Source.
  1. Enter view-source:http://www.google.com/ into the address bar and press Enter.
  2. Click any href or src value in the source.
Links are clickable.

Task manager


Test case Steps Expected Result
Launch Task Manager
  1. Launch Google Chrome.
  2. Open two web pages in separate tabs.
  3. Press Shift+Esc to launch the Task Manager.
The Task Manager will appear, displaying four columns (Page, Memory usage, CPU, and Network).
Stats for nerds
  1. Launch Google Chrome.
  2. Open two web pages in separate tabs.
  3. Press Shift+Esc to launch the Task Manager.
  4. Click Stats for nerds.
Memory usage statistics are displayed in a new tab.
Process can be killed from Google Chrome's Task Manager
  1. Launch Google Chrome with a new session.
  2. Visit http://www.google.com .
  3. Press Shift+Esc to launch the Task Manager.
  4. Select the process running for www.google.com
  5. Click End Process.
Process is not seen anymore in the Task Manager and a sad face is displayed for the associated process tab.
Two processes (tabs) share the same process ID if one URL is the subdomain and originates from domain URL
  1. Launch Google Chrome with a new session.
  2. Visit http://www.google.com .
  3. CTRL-click the News link from the top-left of the web page.
  4. Press Shift+Esc to launch the Task Manager.
The two processes share a process id.

Comments