Looking to target an element using a cssSelector. What is the best way to achieve this?

Question

Looking to target an element using a cssSelector. What is the best way to achieve this?

Below are the CSS Selector codes I am using:

driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); 

driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='make_pairs']")).click();

These selectors are functional, and now I want to focus on these elements using Selenium. Is there a way to achieve this?

Edit:

js.executeScript("document.querySelector('button.btn-link.make_pairs').focus();");

Although this code works, it always focuses on the first item, which is not my desired outcome.

<li>
  <button class="btn-link" data-sugg-sources="email,full_name" data-sugg-technik="make_pairs">AlZehraala16</button>
</li>

I specifically want to focus only on this button element.

javascript jquery css selenium

Answer 1

Answer №1

There are a couple of ways to achieve this task. One option is to utilize webdriver code, while the other involves using JavaScript. Opting for webdriver may be more preferable since it employs native events. Below is an example demonstrating how to do it using webdriver.

@Test
public void focusElement(){
    WebDriver driver = new FirefoxDriver();
    driver.get("https://google.com");
    driver.manage().window().setSize(new Dimension(1000,300));
    WebElement searchBox = driver.findElement(By.name("q"));
    Actions actions = new Actions(driver);
    actions.moveToElement(searchBox).build().perform();
}

If you prefer achieving this through JavaScript, here's how you can adjust your code accordingly.

public void focusElement(WebElement element){
    if (driver instanceof JavascriptExecutor) {
        ((JavascriptExecutor) driver).executeScript("arguments[0].focus();", element);
    }

}

Answer 2

There are a couple of ways to achieve this task. One option is to utilize webdriver code, while the other involves using JavaScript. Opting for webdriver may be more preferable since it employs native events. Below is an example demonstrating how to do it using webdriver.

@Test
public void focusElement(){
    WebDriver driver = new FirefoxDriver();
    driver.get("https://google.com");
    driver.manage().window().setSize(new Dimension(1000,300));
    WebElement searchBox = driver.findElement(By.name("q"));
    Actions actions = new Actions(driver);
    actions.moveToElement(searchBox).build().perform();
}

If you prefer achieving this through JavaScript, here's how you can adjust your code accordingly.

public void focusElement(WebElement element){
    if (driver instanceof JavascriptExecutor) {
        ((JavascriptExecutor) driver).executeScript("arguments[0].focus();", element);
    }

}

Looking to target an element using a cssSelector. What is the best way to achieve this?

Answer №1

Similar questions

Problems encountered when transferring information from jQuery to PHP through .ajax request

Navigating through Routing Express and sending data to a template

Scripts in iframes within webviews are not preloading and executing properly

Extract data from a CSV table stored in a variable using node.js

How can I create my own unique scrolling behavior in JavaScript?

Consolidate multiple generic items into a single entry

Arrangement of jQuery On Events and Triggers

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Tips for progressing to the following page using selenium?

Controlling HTML5 Video Playback with JavaScript: Pausing at Custom Frames

List style image does not serve its intended purpose

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

Converting the stage object to JSON format and incorporating it into an HTML5 environment using

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

Using VueJS for Dynamic Class Binding

Executing TipTap commands from a script tag in Vue 3: A step-by-step guide

Activate Bootstrap button functionality with JavaScript

The padding on this button seems to be arbitrary and nonsensical

The CSS on the IIS 7 server is not functioning properly, unlike when it is on a

AngularJS: Refresh array following the addition of a new item