---
title: "Watir-webdriver Web Inspector"
description: "An experimental minimal combinatorial code generation on element inspection. Check out the repo for sending your P.R ;) The."
url: "https://h3manth.com/scribe/watir-webdriver-web-inspector/"
canonical_url: "https://h3manth.com/scribe/watir-webdriver-web-inspector/"
markdown_url: "https://h3manth.com/scribe/blog/watir-webdriver-web-inspector.md"
publishDate: "2013-04-20T00:00:00.000Z"
author: "Hemanth HM"
category: "linux"
tags: ["ruby","git","web","linux"]
word_count: 244
reading_time_minutes: 2
x_markdown_tokens: 647
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Watir-webdriver Web Inspector

> An experimental minimal combinatorial code generation on element inspection. Check out the repo for sending your P.R ;) The.

An experimental minimal combinatorial code generation on element inspection. Check out the [repo](https://github.com/hemanth/watir-webdriver-inspector#readme) for sending your P.R ;)

The raw code is as below, and it's evolving!

` /_Author : Hemanth.HM Site : h3manth.com License : GNU GPLV3_ /`

/_Red block around selection_ / function highlight_on(evt) {
    
    
    element = evt.target;
    element.style.borderWidth = '3px';
    element.style.borderStyle = 'solid';
    element.style.borderColor = 'red';
    

}

/_Remove the red highlight_ / function hightlight_off(evt) {
    
    
    evt.target.style.borderStyle = 'none';
    

}

/_Generated the @browser#method on click As of now just console.logs_ / function gen_code(evt) {
    
    
    event.preventDefault() // Prevent click action.
    var elem = evt.target; // Get the elem under inspection.
    var tag_name = elem.tagName.toLowerCase(); // Get the tag_name.
    // Input type has few variations.
    if (tag_name == "input") {
        switch (elem.type) {
        case "button":
        case "reset":
        case "submit":
        case "image":
            tag_name = "button";
            break;
        case "radio":
            tag_name = "radio";
            break;
        case "checkbox":
            tag_name = "checkbox";
            break;
        case "file":
            tag_name = "file_field";
            break;
        default:
            tag_name = "text_field";
        }
    }
    var attribs = elem.attributes;
    for (var i = 0; i < attribs.length; i++) {
        var name = attribs[i].nodeName;
        var val = attribs[i].nodeValue;
        // Avoding style and onclick attrs.
        if (['style', 'onclick'].indexOf(name) < 0) {
            // Log all possible name=>val except 
            console.log( "@browser." + tag_name + "(:" + name + "=>'" + val + "')");
        }
    }
    // Log :text=>text variant.
    console.log( "@browser." + tag_name + "(:text=>'" + evt.target.innerText.toLowerCase() + "')");
    return false;
    

}

// Event listners. document.addEventListener("mouseover", highlight_on, true); document.addEventListener("mouseout", hightlight_off, true); document.addEventListener("click", gen_code, true);