STS 74 WebInspection

Web Inspection Sanity Test Specification for NetBeans 7.4

Author: Vladimir Riha
Last update: 1st August 2013

Mac OS specific details: To find Options on MacOS, go to Netbeans menu -> Preferences

Sample projects

*  HTML5 project
*  Web JSP project
*  PHP Project
*  Web JSF project


This is a general sanity test specification for Web Inspection in various types of projects (HTML5, Java Web and PHP). Sample projects to be used are attached to this page. Each project has index page as an entry point (based on project type it could be index.html, index.php, index.jsp. index.xhtml etc.)

Starting with 7.4, there is a new browser switcher in the main toolbar. Web inspection and JS debugger work in each browser from the top part of the switcher

For purpose of sanity testing, all projects with are to run in "Chrome (Chromium) with NB integration". HTML5 project type is expected to be tested also with Embedded Browser and very briefly inspection on Android (mobile Chrome) and iOS Simulator. From now on, all tests below expect Chrome or Chromium with NB integration to be used.

Contents


Test suite: Browser extension

  1. Missing extension
    1. Open sample project and run it in browser without NetBeans Connect extension
    2. In release version, dialog suggesting to go to Chrome WebStore is opened, confirm and install extension
    3. In dev version, extension must be installed manually from its folder. Click on "locate" and follow instructions
    • EXPECTED RESULT: Extension is successfully installed, Browser DOM window, CSS Styles and debugging windows are opened on project/file run

Test suite: Browser DOM

  1. Browser DOM content

    1. Open sample project and run it
    2. After index page is opened in browser, Browser DOM window is displayed next to Navigator
    • EXPECTED RESULT: Browser window is opened, there is a browser icon to symbolize in which browser project is running on and also URL address of actual page. By default, only direct child elements of <body> are expanded. Next to each element's name, there is also a value of class and ID attributes
  1. Element highlighting from Browser DOM
    1. When page is running in browser, hover over some element in Browser DOM
    • EXPECTED RESULT: Element is highlighted in browser, if you move cursor in Browser DOM then highlighting is updated in browser
  2. CSS Styles population from Browser DOM

File:Ts80_inspectionsanity_cssstyles.png

    1. When page is running in browser, click on div.container in Browser DOM
    • EXPECTED RESULT: CSS Styles window is populated as on the screenshot below

Test suite: CSS Styles

CSS Styles window has 3 sections: Applied properties (lists all properties applied to given element), applied rules (lists all rules applied to given element) and rule editor (allows to edit selected rule and its properties).


  1. "CSS styles basic interaction"
    1. When page is running in browser, click on div.container
    2. CSS Styles is populated, click on vertical-align property in Properties section
    3. Proper rule in Applied Styles is selected and content of this rule is populated into rule editor section
    4. Click on .container in Applied Styles
    5. Properties from this rule are again populated into rule editor section
    6. If you double click on some item in either of these 3 sections, the appropriate file with the CSS property definition or rule is opened in editor on correct position
    • EXPECTED RESULT: "All works OK"
  2. "Indication of state of CSS properties"
    1. In Browser DOM, click on body
    2. In CSS Styles|Applied Styles, click on rule body
    3. File:Ts80_inspectionsanity_states.png
    • EXPECTED RESULT: State of each property is reflected in used font color and style as on screenshot above, if you hover over such property, there is a explanation of the particular color in tooltip
  3. "Media query information"
    1. Select some element with css conditioned via CSS3 Media Query (i.e. div.sixteen.columns)
    2. File:Ts73_csseditor_mq.png
    • EXPECTED RESULT:"CSS Styles window displays the query together with rule name"
  4. "Media query information change"
    1. Select some element with css conditioned via CSS3 Media Query (i.e. div.sixteen.columns)
    2. resize browser window to make it e.g. a lot smaller
    • EXPECTED RESULT:"Media query information is updated in CSS Styles, together with rules and properties"
  5. "Read Only CSS file"
    1. In Browser DOM, click on body
    2. In Applied Styles focus body rule that comes from remote URL
    • EXPECTED RESULT: Rule editor is populated and it is read-only, you cannot change any property

Test suite: Inspect Mode

Inspect mode allows to select elements in browser (or from Browser DOM). In Chrome(ium) with NB integration, it can be started e.g. from context menu or it could be turned on from CSS Styles window. Whenever you change some CSS property, the change should be instantly visible in browser. Watch for possible slowness. Also check that if you change some CSS property, content of CSS Styles window remains the same and that there is not some flashing.

PHP & Java Web projects - please try basic web inspection also with some other project (e.g. some sample in NetBeans). The reason is that whenever is used local CSS file, it must be writeable and the more cases to try, the better.


  1. Element highlighting on hover
    1. Turn on Inspection Mode in browser
    2. Hover over some element in browser
    • EXPECTED RESULT: Element is highlighted in Browser DOM and vice versa (if "Synchronize Navigator and browser element highlighting" is on in Project Properties
  2. Proper data population
    1. Turn on Inspection Mode in browser
    2. Click on some element in browser
    • EXPECTED RESULT: Element stays outlined after you hover over another element. Other hovered element is highlighted
    • EXPECTED RESULT: Selected element is also selected in Browser DOM window (all parent nodes are expanded)
    • EXPECTED RESULT: CSS Styles window is populated with properties of selected element
  3. Multiple select
    1. Start Inspection Mode
    2. Select multiple elements using Ctrl+Click on each of them
    • EXPECTED RESULT: Elements are highlighted in browser , CSS Styles window says "Multiple elements selected". Try the same with Browser DOM window window. Try to Ctrl+Click on already selected elements, it should deselect them
  4. Toggle element state
    1. Start Inspection Mode
    2. Select element
    3. in CSS Styles, click on icon button "Style element states"
    4. 4 states should be displayed: hover, active, focus and visited
    5. Check some
    • EXPECTED RESULT:Element in browser looks like the selected state is active (e.g. like if you hover over it), CSS Styles window shows rule for this state as well
  5. "Highlight elements affected by property"
    1. Select some property in Properties section of CSS Styles while Inspect mode is on
    2. All elements, that are affected by the rule where this property belongs, are outlined (green dashed border)
    3. Click on some rule in Styles section.
    • EXPECTED RESULT: Result is the same, affected elements in browser are highlighted with green border
  6. "Control toolbar in Rule Editor section"
    1. Select some element either from Browser DOM window or using Select Mode
    2. Select some of its styles from CSS Styles
    3. Rule Editor section is populated. You can see action icons on the top with following actions: Add Property , Edit CSS Rules (in Applied Styles section), Filter (the magnifier icon).

File:Ts73_csseditor_toolbar.png

    1. Edit some property in the Rule Editor section, tru to add new and remove existing.
    • EXPECTED RESULT: "Try each of this action and make sure the you can add property to the rule and add a new rule to the file (using Edit CSS Rules). Field "Stylesheet" has to correspond with stylesheet where the selected rule is defined. "At Rule" lists @media queries in css file and allows to insert a rule to the specific @media query. Try offline mode too. Try the 3 icons for changing the way which and how css properties are displayed". ALL CHANGES ARE INSTANTLY PROPAGATED TO BROWSER"
  1. "[HTML5 project only] Simple list of values in Add Property and Rule Editor section"
    1. Select some item in Browser DOM and some of its styles in CSS Styles
    2. Rule Editor section is populated with given rule
    • EXPECTED RESULT: "Test that for some known properties there is a list of possible values (color, float etc.) and also there is "none". If you select none then the property is removed from the rule. Try offline mode as well"
  2. "[HTML5 project only] Filter content of Rule Editor section"
    1. Having selected heading from the previous step, check that Styles shows list of applied css rules for given element
    2. If you click on some rule in Styles, Rule Editor section is populated and shows the selected css rule
    3. Try all 4 filters: Show all css properties, Show property categories, Natural sort and Alphabetical sort
    • EXPECTED RESULT: "Properties in Rule Editor section are sorted as expected. Try it in offline mode too."
  3. "Editing number value property"
    1. Run some file
    2. Select some element that has css rule with some number-based property (e.g. padding, margin, font-size etc.)
    3. Select this property in CSS Styles so it is populated to Rule Editor section
    4. Place cursor to the "value column" in Rule Editor section for this property
    5. Press arrow buttons up and down
    • EXPECTED RESULT: "The value is increasing/decreasing and you can see instant changes in browser. (you may have press Esc in some properties to hide completion list)"
  4. "Editing color based property"
    1. Run some file
    2. Select some element that has css rule with some color based property (e.g. color, background-color etc.)
    3. Select this property in CSS Styles so it is populated to Rule Editor section
    4. Place cursor to the "value column" in Rule Editor section for this property
    5. Press the "triangle" icon
    6. List of colors is offered, pick some and make sure the element is changed
    • EXPECTED RESULT: "The color is changed, try to use color chooser (at the beginning of the list) as well "
  5. "Refresh on save"
    1. Run some file, once it is opened, modify it and save it
    • EXPECTED RESULT: "File is reloaded in browser"

Test suite: JavaScript Debugger

Unlike other debuggers, JavaScript debugger available also on Run action. So in order to use it, you don't have to debug file/project. If local file is opened in read-only mode, this is wrong and it means that URL of the JS file was not correctly translated to file path

  1. New DOM breakpoint from Browser DOM
    1. Run HTML page
    2. Select some node in Browser DOM, right mouse click and add some breakpoint
    • EXPECTED RESULT: Appropriate breakpoint is created and list in Breakpoints window. Test that it works (in sample projects, you can add DOM breakpoint "On node removal" to list item with text "Remove me". Once you click on it, the element is removed and code execution should stopped at breakpoint.
  2. [HTML5 project only] New breakpoint from Breakpoints window
    1. Open index file in IDE
    2. Open Breakpoints window (Alt+Shift+5)
    3. Click on "Create new breakpoint" icon
    4. New Breakpoint dialog is opened, try to add all types of breakpoints: Line, DOM, Event listener and XMLHttpRequest.
    • EXPECTED RESULT: All breakpoints are created
  3. Breakpoints deactivation
    1. Open file in IDE
    2. Run the file in browser
    3. In Breakpoints window, click on "Deactivate all breakpoints" icon
    4. File:Ts73_jsdebugger_deactivation.png
    • EXPECTED RESULT: All breakpoints are deactivated. Code execution does not stop on them, lines with breakpoints are gray and all breakpoints have crossed icon. Activate them back and make sure they all works as expected
  4. Create new line breakpoint
    1. Open index page in IDE
    2. Put cursor on some line with JavaScript code
    3. Try one of following: (1) Right mouse click and "Toogle line breakpoint" or (2) keyboard shortcut Ctrl+F8 or (3) click on line number
    • EXPECTED RESULT: Appropriate breakpoint is created and list in Breakpoints window
  5. Create new watch
    1. Open index page in IDE
    2. Click on some JavaScript variable
    3. Invoke New Watch dialog from context menu
    4. Name of the watch should be prefilled, confirm it
    • EXPECTED RESULT: New watch is created and it is listed in Variables and Watches windows. Debug the code and make sure it is correctly evaluated
  1. [HTML5 project only] Line breakpoint after source modification
    1. Create a line breakpoint
    2. Trigger some action that causes code execution to be stopped at the given line
    3. Continue F5
    4. Add some new lines before the line with breakpoint and repeat action
    • EXPECTED RESULT: Code execution stops at the right (red) line. For instance if breakpoint was originally at line X and new lines moved it to line X+3, then code execution stops at line X+3 - issue 220836
  2. Test common debugging steps (Step Into, Step Over etc.)
    1. You can use listener (DOM event) breakpoint for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run index page and copy text from the form field with default value "Copy this text to clipboard"
    3. Try all the debugging steps (Step Into, Step Over, Continue...) and make sure they work as expected
    4. While debugging, check the Variables window
    5. The window should contain simple variables and their values as well as objects and their properties and values. Each object should have __proto__ property. In Global there are variables/objects with global scope
    • EXPECTED RESULT: All steps work, if a code execution stops in different file, this file is opened in IDE and focused.
  3. Variable value
    1. You can use listener (DOM event) breakpoint for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging, hover over some simple (primitive) variable in editor
    4. File:Ts73_jsdebugger_hover.png
    • EXPECTED RESULT: Value of the hover variable is displayed in tooltip text
  4. Call Stack window
    1. You can use listener (DOM event) breakpoint for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging the Clipboard-Copy scenario, open Call Stack window (if not already)
    • EXPECTED RESULT: As you Step Over, Step Into etc. the current call stack is updated
    • EXPECTED RESULT: Check that if you right click on some item and select Go To Source the appropriate file is opened in Editor on given line
    • EXPECTED RESULT: Call stack lines in editor are highlighted
  5. Call Stack - Make current
    1. You can use listener (DOM event) breakpoint for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging the Clipboard-Copy scenario, open Call Stack window (if not already)
    4. Right click on some item in Call Stack window and select "Make current".
    5. File:Ts73_jsdebugger_callstack.png
    • EXPECTED RESULT: Editor shows corresponding source code, selected frame is bold. Make sure that Variables window contains only variables (and their values) that are in the given frame context
  1. Expandable tooltip
    1. While debugging, hover over some object variable
    2. File:ExpTooltip.png
    • EXPECTED RESULT: Tooltip for variable appears, it is expandable and looks like on the image below
  2. Browser log
    1. Previous debugging produced some JS logging
    • EXPECTED RESULT: If not opened, open Window
  3. [HTML5 project only] Evaluate expression
    1. Run index page
    2. Add breakpoint to e.g. event listener Clipboard/Copy
    3. Try copy some text from the input field above page to clipboard
    4. Code execution is stopped on the given line
    5. Step into few times
    6. Open Debug|Evaluate expression
    • EXPECTED RESULT: An evaluator window is opened in bottom editor area and evaluation result is visible in Variables window. Try to type some code and press Evaluate code fragment. Make sure it shows correct result. Repeat it one more time for different expression. Press the triangle icon in the right corner and a list of previously evaluated expressions is shown. If you pick some, the expression is inserted to the evaluator window
  4. XHR Breakpoint
    1. Run index page
    2. Add XHR breakpoint for URL e.g. "lines"
    3. on index page, click on some item in section "XMLHTTP breakpoints - practical", below is output log to see if XHR was actually done
    • EXPECTED RESULT: Code execution is stopped when XRH is about to be sent
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo