How to Find Web element by Id and class

I need for my function to only get a table if ID=“xxx” and class=“xxx”
they both have the same class but different ids and i need to get only on of them
how to do it

WebElement BranchType = driver.findElement(By.id(‘BranchTypes_Tab’))
WebElement NEXT = driver.findElement(By.className(‘dx-next-button’))

I need to have them both at the same time
like need both conditions to be true to be able to access a certain div

Perhaps you can use “By.xpath” and have something like:

def BranchType = driver.findElement(By.xpath('//div[@id="BranchTypes_Tab" and @class="dx-next-button"]'))

or

def BranchType = driver.findElement(By.xpath('//div[@id="BranchTypes_Tab"] [@class="dx-next-button"]'))
1 Like

I’ve tried both methods you mentioned and this is what i got
FAILED.
Reason:
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {“method”:“xpath”,“selector”:"//div[@id=“BranchTypes_Tab”] [@class=“dx-next-button”]"}

it is not able to detect it either

@kazurayam Do you have any idea how may I do it ?
I need to click The next button on the page yet I need to identify it by its class and ID because in the interface we have two classes same name but different Id but the findElement function is only detecting The first one and clicking it not the one I want and I am doing that for when the button is disabled (cant go to the next page anymore) i want it to stoop clicking on it and exist the loop
im doing this just to set a loop to start when it is not disabled to a function then stop when i am on the last page

No.

Without looking at the target HTML source code, nobody can tell how a locator should be.

Please read the following guidance.

[quote=“grylion54, post:3, topic:62227”]![class 2|690x459]
this is the next button when disabled that i need to detect at the end
(upload://xNCE9zhQMuPTQJLNTEBrSWau5u1.png)

def BranchType = driver.findElement(By.xpath('//div[@id="BranchTypes_Tab" and @class="dx-next-button"]'))

[/quote]

This is the function I’m using:

This is what I have at first

This is the error I’m getting:
=============== ROOT CAUSE =====================

For trouble shooting, please visit: https://docs.katalon.com/katalon-studio/docs/troubleshooting.html

02-07-2022 11:07:53 AM Test Cases/MSL_Tests/MSL fix

Elapsed time: 12.345s

Test Cases/MSL_Tests/MSL fix FAILED.
Reason:
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {“method”:“xpath”,“selector”:“//div[@id=“BranchTypes_Tab”] [@class=“dx-next-button”]”}
(Session info: chrome=97.0.4692.99)
For documentation on this error, please visit: Exceptions | Selenium
Build info: version: ‘3.141.59’, revision: ‘e82be7d358’, time: ‘2018-11-14T08:25:53’
System info: host: ‘DESKTOP-H2PS5GU’, ip: ‘192.168.1.118’, os.name: ‘Windows 10’, os.arch: ‘amd64’, os.version: ‘10.0’, java.version: ‘1.8.0_282’
Driver info: com.kms.katalon.selenium.driver.CChromeDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 97.0.4692.99, chrome: {chromedriverVersion: 97.0.4692.36 (747e0a0f19c13…, userDataDir: C:\Users\TT\AppData\Local\T…}, goog:chromeOptions: {debuggerAddress: localhost:61052}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, webauthn:virtualAuthenticators: true}
Session ID: 063a79dca5580976704d0abe89613216
*** Element info: {Using=xpath, value=//div[@id=“BranchTypes_Tab”] [@class=“dx-next-button”]}
at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:187)
at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:122)
at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:49)
at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:158)
at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:83)
at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:552)
at com.kms.katalon.selenium.driver.CChromeDriver.execute(CChromeDriver.java:19)
at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:323)
at org.openqa.selenium.remote.RemoteWebDriver.findElementByXPath(RemoteWebDriver.java:428)
at org.openqa.selenium.By$ByXPath.findElement(By.java:353)
at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:315)
at org.openqa.selenium.support.events.EventFiringWebDriver.lambda$new$1(EventFiringWebDriver.java:105)
at com.sun.proxy.$Proxy10.findElement(Unknown Source)
at org.openqa.selenium.support.events.EventFiringWebDriver.findElement(EventFiringWebDriver.java:194)
at org.openqa.selenium.WebDriver$findElement.call(Unknown Source)
at MSL fix.run(MSL fix:51)
at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
at com.kms.katalon.core.main.TestCaseExecutor.runScript(TestCaseExecutor.java:442)
at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:433)
at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:412)
at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:404)
at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:281)
at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:142)
at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:133)
at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)
at TempTestCase1644224871296.run(TempTestCase1644224871296.groovy:25)

In the screenshot of HTML you attached above, I could not find a <div id="BranchTypes_Tab">.

I do not see what you mean.


what i posted is inside the div you are looking for
which is the element i want to base my loop on as you see
there is a CustomerTypes_Tab and BranchTypes_Tab
i want to access the div inside the branch and let it take as a condition the “disable button” when it changes there

In the new screenshot you attached, I could not find <div class="dx-next-button">.

I do not see what you mean.

I do not understand this. This might be perfectly obvious to you, but not to me.

Okay so I need to click the next button until it is disabled and when it is disabled the class name changes to dx-button-disable as show below

But before that the class is: class= dx-next-button
as shown in the below image

Both of these classes are the same they just changed from navigate to disabled once we reach the last page of our website

Both of these classes are inside the div

<div id="BranchTypes_Tab" as u can see in the #3rd Line

I need to access the BranchTypes_Tab Div and get and check the classes inside it only without getting them from the CustomersTypes_Tab becauses they are both named the same, that is why i need to be specific to which i need to get because when i use th findElemet function it is checking and getting me the one only in the CustomersTypes_Tab but not the one i want

Sorry, I can not follow your case.

Thank You for your help and time

This would be easy using CSS selectors:

.BranchTypes_Tab .dx-navigate-button.dx-next-button:not(.dx-button-disable)

If I’m understanding your requirement correctly, the above selector will only select the button when it does NOT have the class .dx-button-disable.

You can read about the CSS negation pseudo-class here:

I don’t think it is related to CSS selectors and I just tried and I’m getting an error it can not detect it

Seriously? That is an irrelevant misapplication of the proposed solution.

Good luck. :confused:

image

-oh my mistake i skipped one part HAHAHA SORRY

1 Like

Unfortunately, you don’t quite have the grasp of the matter of xpath. The computer cannot “see”, so you have to tell it exactly what to look for. If Russ’ CSS works, go with that, however, in future, to use an attribute, you have to use the full attribute or use the function, contains. In the case you described above, because the “class” attribute changes and you wanted to stop on the change, you could not use “contains”.

The full class attribute is not, “dx-next-button”, but “dx-navigate-button dx-next-button”–you can double click on the HTML text and use copy and paste. Remember–tell the computer exactly.

Lastly, the div with the “id=BranchTypes_Tab” is not the same one as the div with the class of your “dx-next-button”. Two different divs. However, you can start at the one with the id and traverse to the other, like:

id("BranchTypes_Tab")//div[@class="dx-navigate-button dx-next-button"]

Note the double slash between the id and the second div. This just means there are “child” elements missing which you can fill in, but may not need to as long as the pathway is unique.

1 Like

This work, but unfortunately after multiple iteration (it is in a loop and click on it )and when I get to the last page, the class changes and the FindElemet function returns as fails//error or get stuck in the loop whenever I check if I use:

def BranchContainer = driver.findElement(By.xpath(‘id(“BranchTypes_Tab”)//div[@class=“dx-navigate-button dx-next-button”]’))

because the class is now [dx-button-disable dx-navigate-button dx-next-button]
and this is the problem I’m facing now

Yes, that is the change that was expected and why we could not use the contains function. Now, either we make a second button element that takes on the “role” of the disabled button and “finish” or we try with the “dx-next-button” button you created and “finish” because it is not present (or visible) any more.

if (!BranchContainer.isDisplayed()) {  blah blah blah

or

if (BranchContainer.isDisplayed() == false) {  blah blah blah
1 Like