TS 74 SelectionMode

Inspect Feature Test Specification for NetBeans 7.4

Previously called Select Mode

Author: Vladimir Riha
Last update: 31st July 2013
Introduction: Test specification for Inspect feature in NetBeans

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

Only for HTML/JavaScript projects

Inspection in Chrome can be turned on by either using NetBeans icon in Omnibar or from right click context menu or using Ctrl+Shift+S shortcut Inspection Mode in Embedded browser can be turned on from its toolbar or using Ctrl+Shift+S shortcut Inspection in all supported browsers can be turned on by using button in Browser DOM window

Try both, Chrome and Embedded browser

Contents


Test suite: General

In all cases, some HTML file has to be running in browser with IDE integration (unless said otherwise)

  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). You can also see its dimensions
  2. Proper data population
    1. Turn on Inspection Mode in browser
    2. Click on some element in browser
    3. Element stays outlined after you hover over another element. The second element is highlighted
    4. Selected element is also selected in Browser DOM window (all parents node are expanded)
    • EXPECTED RESULT: CSS Styles window is populated with properties of selected element
  3. Navigator interaction
    1. Click on some item in Browser DOM
    • EXPECTED RESULT: Properties window shows properties for given element, all inspection related windows behaves the same as in task 2
  4. Hovering in Browser DOM
    1. Hover over some item in Browser DOM
    • EXPECTED RESULT: Hovered element is highlighted in browser
  5. Multiple select
    1. Start Inspection Mode
    2. Select multiple elements using Ctrl+Click on each of them
    • EXPECTED RESULT: Elements are selected, CSS Styles window says "Multiple elements selected". Try the same with Browser DOM window. Try to Ctrl+Click on already selected elements, it should deselect them
  6. 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
  7. Freeze element state
    1. Run page in either Chrome(ium) with NB integration or in embedded browser
    2. Hover over some element in browser and press Ctrl+Shift+S while being over this element
    • EXPECTED RESULT:Inspection is turned on, element is frozen in this hover state

Test suite: Highlighting hovered item

  1. Multiple select
    1. Run file with "Synchronize Navigator and browser element highlighting" option checked
    2. If you hover over some item in Browser DOM, it is highlighted in browser
    3. Go to project properties and uncheck this option
    • EXPECTED RESULT: Hovering in Browser DOM no longer highlights element in browser. Inspection Mode is still available after turning off Highlight Selection

Test suite: Changes made from CDT

  1. Changes in CDT
    1. Run file in either plain Chrome(ium) or Chrome(ium) with NB integration
    2. In browser, press Ctrl+Shift+J to open Chrome Developer Tools (CDT)
    3. Switch to Sources category
    4. Pick some of yours JavaScript and CSS files and edit it in CDT
    5. Press Ctrl+S to save modifications
    • EXPECTED RESULT: Open the modified file in IDE and make sure changes were propagated from CDT to IDE. Change in CSS is immediately visible in browser without any reload
  2. Changes in CDT - Restore
    1. Run file in either plain Chrome(ium) or Chrome(ium) with NB integration
    2. In browser, press Ctrl+Shift+J to open Chrome Developer Tools (CDT)
    3. Try to run file again from IDE
    4. IDE says "Browser refused to debug this tab..."
    5. Close CDT
    6. Run project again
    • EXPECTED RESULT: Debugging and inspection works as if CDT has never been opened
  3. Changes in IDE
    1. Run file in either plain Chrome(ium) or Chrome(ium) with NB integration
    2. In browser, press Ctrl+Shift+J to open Chrome Developer Tools (CDT)
    3. in IDE, try to modify loaded HTML file, JavaScript and CSS file (try all!) and save each file after its modification
    • EXPECTED RESULT: After each save, page is reloaded in browser
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