CODEWITHSUNDEEP
javascriptgoogle-chromeselenium
drummingrocks
drummingrocks

Reputation: 33

Selenium and Chrome, having trouble selecting element

I'm using Selenium and Chrome to write a script. I'm having trouble getting Selenium to select and click on two elements. Here's the element I'm trying to select:

HTML of Element 1:

<td class="menuItem" id="tWlans" style=""><a href="frameWlan.html" 
id="cWlans" accesskey="W" onmouseover="highlight('Wlans')" 
onmouseout="removeHighlight('Wlans')" onclick="selectTab('Wlans')" 
onfocus="highlight('Wlans')" onblur="removeHighlight('Wlans')" 
target="mainFrame"><u>W</u>LANs</a></td>

HTML of Element 2:

<td class="listNoPad">  
<input type="TEXT" name="1.6.7.wlan_id" class="statictextboxlink" 
onclick="editThisWlan(this.value,this.name)" readonly="" size="7" value="7">
</td>

I've tried selecting the element by id and by XPath, neither of which works. 

function siteNavigate() {
sleep(4500);
driver.findElement(By.xpath('//*[@id="cWlans"]')).click();  
//driver.findElement(By.id('cWlans')).click();
}

Thanks in advance for any help and suggestions.

Edit:

function helpAction(pageId, startpage) {
  var baseHref = window.location.href;
  var index = baseHref.indexOf("/screens");
  baseHref = baseHref.substring(0, index);

  var href = "/helpfiles/oweb/index.html";
  var editWindow = window.open(baseHref + href, "editWindow", "left=100 top=50 menubar=no,toolbar=yes,width=800,height=600,status=yes,resizable=yes");
  if (navigator.appName != "Netscape") {
    editWindow.location.href = baseHref + href;
    editWindow.location.reload(true);
  }
  editWindow.focus();
}

function feedbackAction() {
  var URL = 'http://www.cisco.com/go/wireless-feedback';
  var feedbackWindow = window.open(URL, "FeedbackWindow", "left=100 top=50 menubar=no,toolbar=no,scrollbars=yes,titlebar=yes,width=800,height=800,status=yes,resizable=yes");
  feedbackWindow.focus();
}

function selectTab(tabName) {
  // All this function does is update the value of the hidden field and call the updatePage() function
  // Obtain object reference to hidden field
  var fieldObj = document.getElementById("hSelectedTab");
  // Store the new tab selection in the hidden field
  fieldObj.value = tabName;
  updatePage();
}

function highlight(tabName) {
  //remove highlight for all the tabs
  removeHighlightAll();
  var highlightObj = document.getElementById("t" + tabName);
  // Only highlight if srcElement is a tab object.
  highlightObj.style.backgroundColor = "#25546B";
}

function removeHighlight(tabName) {
  var highlightObj = document.getElementById("t" + tabName);
  highlightObj.style.backgroundColor = "";
}

function removeHighlightAll() {
  document.getElementById("tMonitor").style.backgroundColor = "";
  document.getElementById("tWlans").style.backgroundColor = "";
  document.getElementById("tSwitch").style.backgroundColor = "";
  document.getElementById("tWireless").style.backgroundColor = "";
  document.getElementById("tSecurity").style.backgroundColor = "";
  document.getElementById("tManagement").style.backgroundColor = "";
  document.getElementById("tCommands").style.backgroundColor = "";
  document.getElementById("tHelp").style.backgroundColor = "";
  document.getElementById("tFeedback").style.backgroundColor = "";
}

function updatePage() {
  // Clear the current tab selection
  removeSelection();
  // Obtain object reference to hidden field
  var fieldObj = document.getElementById("hSelectedTab");
  // Retrieve the selected tab
  var selectedTab = fieldObj.value;
  // Highlight the selected tab
  cellObj = document.getElementById("t" + selectedTab);
  cellObj.className = "selected";
}

function removeSelection() {
  removeHighlightAll();
  // Brute force method to clear the tab selection
  document.getElementById("tMonitor").className = "menuItem";
  document.getElementById("tWlans").className = "menuItem";
  document.getElementById("tSwitch").className = "menuItem";
  document.getElementById("tWireless").className = "menuItem";
  document.getElementById("tSecurity").className = "menuItem";
  document.getElementById("tManagement").className = "menuItem";
  document.getElementById("tCommands").className = "menuItem";
  document.getElementById("tHelp").className = "menuItem";
  document.getElementById("tFeedback").className = "menuItem";
}

function DisplayMsgIfAny() {
  if (document.forms[0].err_flag.value == 1) {
    alert(document.forms[0].err_msg.value);
  } else if (document.forms[0].result_flag.value == 1) {
    alert(document.forms[0].cmd_result.value);
  }
  document.forms[0].err_flag.value = 0;
  document.forms[0].result_flag.value = 0;
  document.forms[0].buttonClicked.value = 0;
}

//need to get image for the OEMS and change the logo image.
function getLogoImage() {}
A {
  TEXT-DECORATION: none
}

#home_icon {
  height: 12px;
}

A:link {
  COLOR: #ffffff;
  TEXT-DECORATION: none
}

A:hover {
  COLOR: #ffffff;
  TEXT-DECORATION: none
}

A:active {
  COLOR: #000000;
  TEXT-DECORATION: none
}

A:visited {
  COLOR: #ffffff;
  TEXT-DECORATION: none
}

A.command {
  COLOR: #ffffff;
  TEXT-DECORATION: none
}

A.command:hover {
  COLOR: #ff9100;
  TEXT-DECORATION: underline
}

P {
  FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

TD {
  FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

P {
  FONT-SIZE: 11px;
  MARGIN: 0px;
  COLOR: #333366
}

TD {
  FONT-SIZE: 12px
}

TD.menuItem {
  PADDING-RIGHT: 10px;
  PADDING-LEFT: 10px;
  PADDING-BOTTOM: 4px;
  PADDING-TOP: 5px;
  BORDER-BOTTOM: #000000 5px solid;
  width: 1%;
  white-space: nowrap;
}

TD.selected {
  PADDING-RIGHT: 10px;
  PADDING-LEFT: 10px;
  PADDING-BOTTOM: 4px;
  COLOR: #000000;
  PADDING-TOP: 5px;
  BORDER-BOTTOM: #ff9100 5px solid;
  width: 1%;
  white-space: nowrap;
}

TD.space {
  WIDTH: 50%;
}

.style2 {
  COLOR: #ffffff
}
<script language="JavaScript" src="../servicescript41.js"></script>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="updatePage(); DisplayMsgIfAny();">
  <table width="100%" height="53" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td style="PADDING-BOTTOM: 4px" align="middle" background="../images/background_web41.jpg" width="180">
          <img src="../images/cisco/cisco-logo-2007.gif" width="67" height="40" alt="logo" />
        </td>
        <td valign="bottom" background="../images/background_web41.jpg">
          <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tbody>
              <tr>
                <td class="menuItem" id="tMonitor" style=""><a href="frameMonitor.html" id="cMonitor" accesskey="M" onmouseover="highlight('Monitor')" onmouseout="removeHighlight('Monitor')" onclick="selectTab('Monitor')" onfocus="highlight('Monitor')" onblur="removeHighlight('Monitor')" target="mainFrame"><u>M</u>ONITOR</a></td>
                <td class="selected" id="tWlans" style=""><a href="frameWlan.html" id="cWlans" accesskey="W" onmouseover="highlight('Wlans')" onmouseout="removeHighlight('Wlans')" onclick="selectTab('Wlans')" onfocus="highlight('Wlans')" onblur="removeHighlight('Wlans')" target="mainFrame"><u>W</u>LANs</a></td>
                <td class="menuItem" id="tSwitch" style=""><a href="frameSwitching.html" id="cSwitch" accesskey="C" onmouseover="highlight('Switch')" onmouseout="removeHighlight('Switch')" onclick="selectTab('Switch')" onfocus="highlight('Switch')" onblur="removeHighlight('Switch')" target="mainFrame"><u>C</u>ONTROLLER</a></td>
                <td class="menuItem" id="tWireless" style=""><a href="frameWireless.html" id="cWireless" accesskey="I" onmouseover="highlight('Wireless')" onmouseout="removeHighlight('Wireless')" onclick="selectTab('Wireless')" onfocus="highlight('Wireless')" onblur="removeHighlight('Wireless')" target="mainFrame">W<u>I</u>RELESS</a></td>
                <td class="menuItem" id="tSecurity" style=""><a href="frameSecurity.html" id="cSecurity" accesskey="S" onmouseover="highlight('Security')" onmouseout="removeHighlight('Security')" onclick="selectTab('Security')" onfocus="highlight('Security')" onblur="removeHighlight('Security')" target="mainFrame"><u>S</u>ECURITY</a></td>
                <td class="menuItem" id="tManagement" style=""><a href="frameManagement.html" id="cManagement" accesskey="A" onmouseover="highlight('Management')" onmouseout="removeHighlight('Management')" onclick="selectTab('Management')" onfocus="highlight('Management')" onblur="removeHighlight('Management')" target="mainFrame">M<u>A</u>NAGEMENT</a></td>
                <td class="menuItem" id="tCommands" style=""><a href="frameCommands.html" id="cCommands" accesskey="O" onmouseover="highlight('Commands')" onmouseout="removeHighlight('Commands')" onclick="selectTab('Commands')" onfocus="highlight('Commands')" onblur="removeHighlight('Commands')" target="mainFrame">C<u>O</u>MMANDS</a></td>
                <td class="menuItem" id="tHelp"><a href="javascript:helpAction()" id="cHelp" accesskey="L" onmouseover="highlight('Help')" onmouseout="removeHighlight('Help')" onfocus="highlight('Help')" onblur="removeHighlight('Help')">HE<u>L</u>P</a></td>
                <td class="menuItem" id="tFeedback" style=""><a href="javascript:feedbackAction()" accesskey="F" onmouseover="highlight('Feedback')" onmouseout="removeHighlight('Feedback')" onfocus="highlight('Feedback')" onblur="removeHighlight('Feedback')"><u>F</u>EEDBACK</a></td>
                <td class="space">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <div style="position:absolute; right:0px; top:0px; margin: 3px 10px 0px 0px">
    <p><a href="#" onclick="javascript:saveConfigAction()" accesskey="v" class="command">Sa<u>v</u>e Configuration</a> &nbsp;|&nbsp; <a href="#" onclick="javascript:pingAction();" accesskey="p" class="command"><u>P</u>ing</a> &nbsp;|&nbsp; <a class="command" href="#" accesskey="g" onclick="javascript:logoutAction();">Lo<u>g</u>out</a>&nbsp;|&nbsp;<a href="#" onclick="javascript:contentframe_screen_refresh()" accesskey="r" class="command"><u>R</u>efresh</a></p>
  </div>
  <form method="post" action="/screens/banner.html">
    <input type="hidden" name="access_control" size="16" maxlength="15" value="1">
    <input name="hSelectedTab" type="hidden" id="hSelectedTab" value="Wlans">
    <input type="hidden" name="err_flag" size="16" maxlength="15" value="0">
    <input type="hidden" name="err_msg" size="512" maxlength="511" value="">
    <input type="hidden" name="result_flag" size="16" maxlength="15" value="0">
    <input type="hidden" name="cmd_result" size="512" maxlength="511" value="Config Saved">
    <input type="hidden" name="ping_address" size="50" maxlength="50" value="">
    <input type="hidden" name="interfaceType" size="11" maxlength="11" value="">
    <input type="hidden" name="buttonClicked" size="16" maxlength="15" value="0">
  </form>
</body>

Edit 2: Error message from Node.js:

        NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="cWlans"]"}
          (Session info: chrome=61.0.3163.100)
          (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 10.0.15063 x86_64)
            at WebDriverError (C:\Selenium\node_modules\selenium-webdriver\lib\error.js:27:5)
            at NoSuchElementError (C:\Selenium\node_modules\selenium-webdriver\lib\error.js:192:5)
            at Object.checkLegacyResponse (C:\Selenium\node_modules\selenium-webdriver\lib\error.js:546:15)
            at parseHttpResponse (C:\Selenium\node_modules\selenium-webdriver\lib\http.js:509:13)
            at doSend.then.response (C:\Selenium\node_modules\selenium-webdriver\lib\http.js:441:30)
            at process._tickCallback (internal/process/next_tick.js:109:7)
        From: Task: WebDriver.findElement(By(css selector, *[id="cWlans"]))
            at thenableWebDriverProxy.schedule (C:\Selenium\node_modules\selenium-webdriver\lib\webdriver.js:807:17)
            at thenableWebDriverProxy.findElement (C:\Selenium\node_modules\selenium-webdriver\lib\webdriver.js:1014:17)
            at siteNavigate (C:\Selenium\byot.js:29:8)
            at sleep.then (C:\Selenium\byot.js:21:5)
        From: Task: WebElement.click()
            at thenableWebDriverProxy.schedule (C:\Selenium\node_modules\selenium-webdriver\lib\webdriver.js:807:17)
            at WebElementPromise.schedule_ (C:\Selenium\node_modules\selenium-webdriver\lib\webdriver.js:2010:25)
            at WebElementPromise.click (C:\Selenium\node_modules\selenium-webdriver\lib\webdriver.js:2092:17)
            at siteNavigate (C:\Selenium\byot.js:29:37)
            at sleep.then (C:\Selenium\byot.js:21:5)

Upvotes: 1

Views: 1292

Answers (3)

drummingrocks
drummingrocks

Reputation: 33

Ok, I apologize in advance. I didn't realize initially that the page had several iframes nested inside the page. To make a very long story short, the frames ended up being the problem the whole time. The site was set up with four frames, some of which changed depending on context and some that essentially stayed static after the initial login. The hardest part was knowing which frame to switch to, and keeping track of which context I was currently focused in on. Here's what I ended up with:

const {Builder, By, until} = require('selenium-webdriver');
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();


driver.get('http://sitetonavigate.com');
driver.manage().window().maximize();
driver.findElement(By.name('bSubmit ')).click();        

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// Wait until Chrome is fully loaded to launch AutoIT login script
sleep(4500).then(() => {
    autoIT();
});

function autoIT() {
    var child_process = require('child_process');
    var workerProcess = child_process.execFile("C:\\Selenium\\autoITscript.exe");
    sleep(2500).then(() => {
        siteNavigate();
    });
}

function siteNavigate() {
    driver.switchTo().frame("banner");
    driver.findElement(By.id('cWlans')).click();

    //Select correct WLAN
    sleep(2500).then(() => {
        driver.switchTo().defaultContent();
        driver.switchTo().frame("mainFrame");
        driver.switchTo().frame("content"); 
        driver.findElement(By.xpath('/html/body/form/table[3]/tbody/tr[8]/td[2]/input')).click();
    });
}

Upvotes: 2

JeffC
JeffC

Reputation: 25744

You are clicking on the TD because it has the ID, tWlans. You (presumably) want to click on the A tag contained within. I would suggest the CSS selector, #tWlans > a. The code is below. I added a wait but it may or may not be needed.

WebDriverWait wait = new WebDriverWait(driver, 5);
wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("#tWlans > a"))).click();

As for the second element, it wasn't in your full HTML posted so I'm not sure if it's unique but you can try these couple CSS selectors:

input[name='1.6.7.wlan_id']
input[onlick^='editThisWlan']

Upvotes: 1

Koen Meijer
Koen Meijer

Reputation: 821

You can use:

Element1 : 

 driver.findElement(By.id('tWlans')).click();

Element2 : 

 driver.findElement(By.name('1.6.7.wlan_id')).click();

Upvotes: 1

Related Questions