Struggling to choose an element with Selenium and Chrome?

Question

Struggling to choose an element with Selenium and Chrome?

I'm working on a script using Selenium and Chrome, but I'm facing issues with selecting and clicking on two specific elements. Let's take a look at the HTML code for these elements:

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 attempted to select the element by both id and XPath, but neither method seems to work.

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

Any help or suggestions would be greatly appreciated.

Edit:

// JavaScript functions
...

// CSS styles
...

// Additional scripts
...

Edit 2: Error message from Node.js:

// Error details
...

javascript google-chrome selenium

Answer 1

Answer №1

Apologies for the confusion earlier. It took me a while to realize that the webpage actually contained multiple nested iframes, causing some issues along the way. There were four frames in total, with some changing based on context and others remaining static after login. The challenge lay in determining which frame to switch to and keeping track of the current focus.

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));
}

// Waiting for Chrome to load fully before launching 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();

    // Selecting 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();
    });
}

Answer 2

Apologies for the confusion earlier. It took me a while to realize that the webpage actually contained multiple nested iframes, causing some issues along the way. There were four frames in total, with some changing based on context and others remaining static after login. The challenge lay in determining which frame to switch to and keeping track of the current focus.

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));
}

// Waiting for Chrome to load fully before launching 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();

    // Selecting 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();
    });
}

Answer 3

Answer №2

Here are the steps you can take:

Step 1:

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

Step 2:

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

Answer 4

Here are the steps you can take:

Step 1:

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

Step 2:

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

Answer 5

Answer №3

When you click on the TD element with the ID of tWlans, it is likely because you are trying to interact with the A tag inside it. To do so, you can use the CSS selector #tWlans > a. Below is the code snippet for this action, including a wait statement that may or may not be necessary.

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

The second element mentioned was not provided in the full HTML shared, making it unclear if it's unique. However, you can attempt using these two CSS selectors:

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

Answer 6

When you click on the TD element with the ID of tWlans, it is likely because you are trying to interact with the A tag inside it. To do so, you can use the CSS selector #tWlans > a. Below is the code snippet for this action, including a wait statement that may or may not be necessary.

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

The second element mentioned was not provided in the full HTML shared, making it unclear if it's unique. However, you can attempt using these two CSS selectors:

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

Struggling to choose an element with Selenium and Chrome?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to pause execution until receiving an API response in a separate function?

Unable to unregister event listener using RemoveEventListener function

Comparing Sails.js middleware and policies: what sets them apart?

Unable to see the tokens on the connect four board when using Javascript and HTML

How can I add rows to the tbody of a table that is already inside a div container?

Vue should only activate the element that has been clicked on

Guide to setting up parameterized routes in GatsbyJS

The AngularJS $filter(date) function is causing incorrect format outputs

How can I utilize module imports with the support of web browsers?

Tips for using jQuery to create a delete functionality with a select element

Unveiling the ApplePay token with VueJS

Encountering the NullInjectorError when Angular 17 is unable to find a provider for the function(options)

Checkbox value not being accurately retrieved by Struts2 page

What is the best way to retrieve JSON data in a React application?

If the number exceeds 1, then proceed with this action

What is the method for executing a server-side script without it being transmitted to the browser in any way?

Javascript skips the if-else block when used asynchronously

Having trouble accessing the card number, expiration date, and CVC in vue using Stripe

Encountering a 404 error in Codeigniter when making an AJAX call

Mysterious codes are active and causing redirecting actions to unfamiliar websites upon clicking