Access in-browser Development Tools

0 votes

Most common browsers have some built-in development tools. These tools will help you to reveal HTML of the page and understand how the page is structured. This all sounds good, but they all have their own look and feel. We will see how we can launch the `Developer Tools`.

Internet Explorer
In Internet Explorer we can access `Developer Tools` by pressing `F12`.

Firefox
Firfox has some built-in developer tools, but Firebug seems to be more popular and powerful. We can download the Firebug add-on from http://getfirebug.com/ .

The shortcut to open `Firebug` is `F12`.

FireBug toolbar

Click on the `Inspect` button on Firebug’s toolbar. Move around the page and everything beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.

Chrome
Chrome comes with `Developer Tools`. The shortcut to open `Developer Tools` is `CTRL` + `SHIFT` + `I` or `F12`.

Chrome toolbar

Click on the `Inspect` button on Chrome Developer Tools toolbar. Move around the page and everything beneath your mouse will be instantly revealed within Chrome Developer Tools, showing you the HTML and CSS behind it.

Opera
Opera comes with `Opera Dragonfly`. The shortcut to open `Opera Dragonfly` is `CTRL` + `SHIFT` + `I`.

Safari
Safari has a built-in `Developer Tools`. First, you need to enable that you want to see the Develop menu.

Click on `Preferences…` in the `settings` drop down menu. Go to the `Advanced` tab and check `Show Develop menu in menu bar`.

The shortcut to open `Developer Tools` is `CTRL` + `ALT` + `I`.

Maximize browser window

0 votes

Some websites implemented responsive design. So, the website looks differently on smaller screens.
Therefore it’s important to maximize the browser window before the test starts.

@Test
public void maximizeFirefox() {
  // Start browser
  System.setProperty("webdriver.gecko.driver", FileUtil.findFileOnPath("mac/geckodriver"));
  final FirefoxDriver driver = new FirefoxDriver();

  // Maximize browser
  driver.manage().window().maximize();

  // Open website
  driver.get("http://www.selenium-in-action.io");
}

There are several bug reports noticing that this feature doesn’t work when using ChromeDriver.
Luckily the is a workaround, we can start Chrome in kiosk mode (full screen without toolbars).

@Test
public void startChromeFullscreen() {
  // Start browser with specific options
  final ChromeOptions options = new ChromeOptions();
  options.addArguments("start-fullscreen");
  System.setProperty("webdriver.chrome.driver", FileUtil.findFileOnPath("mac/chromedriver"));
  final ChromeDriver driver = new ChromeDriver(options);

  // Open website 
  driver.get("http://www.selenium-in-action.io");
}

Kiosk mode

@Test
public void startChromeKioskMode() {
  // Start browser with specific options  
  final ChromeOptions options = new ChromeOptions();
  options.addArguments("--kiosk");
  System.setProperty("webdriver.chrome.driver", FileUtil.findFileOnPath("mac/chromedriver"));
  final ChromeDriver driver = new ChromeDriver(options);

  // Open website 
  driver.get("http://www.selenium-in-action.io");
}