Can't locate element with dynamic id in C#

Hello, I am creating some tests with Katalon for a project that I am working for. For some reason I can’t locate an element with its id, class, xpath etc. Maybe I am doing something wrong. After I login into the application the page looks like this:

If you see the 3 tabs: Favorites, My project, All projects they all have Ids 12, 13, 14 respectively. When I click the button ‘Add project’ and click ‘Create’ a new project is added and this project under ‘My projects’. So my purpose is after creating this project to click on ‘My projects’ button and then click on the name of the new project and edit it so I can make some modifications and move on with my test. The problem is that when I try to click on the ‘My projects’ button I can’t and it says that this property cannot be clicked. After I add the new project the Ids of the three aforementioned buttons also change. So the ‘Favorites’ has now Id=15, ‘My projects’ has Id=16 and ‘All projects’ has Id=17. Can anyone help and let me know what is the right way to locate an element like this? I have tried different things but nothing works so far. Below is the code in my test and a screenshot with the element inspect. Thank you in advance, any help would be much appreciated.

hello,
any errors?
did you try this solution to click on li element?

Hello,
thanks for your response. I have tried some things like these:

driver.FindElement(By.Id(“ui-id-16”)).Click();
//driver.FindElement(By.CssSelector(“a.ui-tabs-anchor[id=‘ui-id-16’]”)).Click();
//driver.FindElement(By.Id(“ProjectListTable”)).FindElement(By.Id(“project-list-tabs-content”)).Click();//FindElement(By.ClassName(“ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active”)).Click();
//driver.FindElement(By.ClassName(“ui-tabs-anchor”)).Click();
driver.FindElement(By.XPath("//*[@class=‘ui-state-default ui-corner-top ui-tabs-active ui-state-active’ and contains(.,‘My projects’)]"));

and maybe a couple more that I have deleted but I can’t seem to make it work. What do you mean with the li element, do you mean the li class ‘ui-state-default ui-corner-top ui-tabs-active ui-state-active’? Like it is in the screenshot I sent you? Can you tell me which command you mean and I will try again. Thanks for your help.

On the end is code that uses js to click on object.
can be implemented as custom keyword.

If I don’t want to use js, how can I click on this element? The id is not working so how could I use maybe the class name or xpath or cssselector? I am not very experienced, so I am trying to find a simple solution if there is one:)

one question: are there any iframes used in your application page?

driver.FindElement(By.XPath(“//*[@class=‘ui-state-default ui-corner-top ui-tabs-active ui-state-active’ and contains(.,‘My projects’)]”));

Looks like you are almost done : your tab is not yet selected (as you want to click on it), so I don’t think it has the class “ui-tabs-active ui-state-active” already. You should remove them from your selector. Also, “My Projects” is on the child element (not on the one with the class ui-corner-top). So your code may looks like (not tested) :

driver.FindElement(By.XPath(“//li[@class=‘ui-state-default ui-corner-top’]/a[contains(.,‘My projects’)]”)).Click();

Hi, thank you for your response. I executed the test and I removed the class that was not active from my selector and I inserted the new command you proposed but the test still fails. It seems that the failure has to do with failure to 'evaluate the document and I get a message that the xpath is not a valid expression:

OpenQA.Selenium.InvalidSelectorException: ‘invalid selector: Unable to locate an element with the xpath expression //li[@class=‘ui-state-default ui-corner-top’]/a[contains(.,‘My projects’)] because of the following error:
SyntaxError: Failed to execute ‘evaluate’ on ‘Document’: The string ‘//li[@class=‘ui-state-default ui-corner-top’]/a[contains(.,‘My projects’)]’ is not a valid XPath expression.
(Session info: chrome=72.0.3626.96)
(Driver info: chromedriver=2.44.609538 (b655c5a60b0b544917107a59d4153d4bf78e1b90),platform=Windows NT 6.1.7601 SP1 x86_64)’

Any idea why this happened?
Thank you
Apostolos

Maybe it has something to do with the single quote, you can try :

driver.FindElement(By.XPath(‘//li[@class=“ui-state-default ui-corner-top”]/a[contains(.,“My projects”)]’)).Click();

Hi, no there aren’t any iframes used in the application.

Hi, now I have modified the command a bit and you are right, it didn’t work because of the quotes. But still it can’t locate the element and I get the message:

‘unknown error: Element is not clickable at point (176, 193). Other element would receive the click:


(Session info: chrome=72.0.3626.96)
(Driver info: chromedriver=2.44.609538 (b655c5a60b0b544917107a59d4153d4bf78e1b90),platform=Windows NT 6.1.7601 SP1 x86_64)’
Maybe I’ll have to think of another way to click on this element.

Your element is located :slight_smile: It is a common issue. Please have a look at
https://docs.katalon.com/katalon-studio/docs/troubleshooting-common-issues-related-to-interacting-with-an-element.html

A javascript click will do the trick !

Thank you, I’ll take a look and see what I can do.

Hi again:) I have created a javascript click inside my test which I think it is ok but the test still fails at the same point. It says again that it is not clickable at that point and another element would take the click. This is the script I created:

IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript(“document.getElementById(‘ui-id-16’).click()”);

Is there an error in my script?

Thank you

Hi, it does not look like a javascript issue. “another element would take the click” means that you are still trying to click with the driver. Did you comment or remove the previous driver.FindElement(…).Click() line ?

I don’t know if your code is correct (I don’t have a C# testing project), but it does not take into account the element we helped you to target in this thread.

Have you considered using Katalon Studio ? I’m a big fan of C#, but if you are building a testing solution from scratch, I can only recommand that you go on Katalon Studio (it is more convenient for managing your tests and also has a recorder mode).

Also, if you were using Katalon Studio to write your tests (maybe I’m wrong), but more people would be able to help you :slight_smile:

Yes I have commented the line that was clicking the element before and instead I tried to click on the element with the javascript click. The test I have in Visual Studio was recorded with Katalon and then exported into Visual Studio. I am using Katalon Recorder 3.6.12 to record my tests and then export it in VS.

just one idea, try to send click to parent object … just as an test

Hi I finally managed to make it click by using the following:

IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript("$(‘li #ui-id-13’).click()");

which is the parent object.

Thank you for your help!

No, sorry, it isn’t “the parent object”. You have merely added the parent to the selector. However, the selector resolves to the element with id=“ui-id-13”. So you’re right back where you started. Said another way, you didn’t learn anything and that’s not cool.

What you did before…

document.getElementById('ui-id-16').click()

getElementById, is a dom interface which takes an id just as you would write it in HTML.

If that didn’t work, and the code you said worked did work, then run for the hills - the web is broken and the world is about to end (or, you had a typo that is no longer evident).

What you tried next was…

$('li #ui-id-13').click()

That is a jQuery (or something that behaves similarly) selector. Your selector says "find an li element that has a descendant element with an id (# means ‘id’) of ‘ui-id-13’.

The reason I’m pointing this out is that it is important you don’t walk away thinking the wrong thing. It’s just as important you don’t kid yourself as to what was broken in the first place, what didn’t work when you tried to fix it and vitally important you understand what actually did fix it.

It’s also important when others read this, they don’t leave thinking the wrong thing.

For example, if that worked for you, then this should work too - no mention of li or jQuery:

document.querySelector('#ui-id-13').click()

as will this:

document.querySelector('body li #ui-id-13').click()

and this:

$('body li #ui-id-13').click()

I don’t know why your original code didn’t work but I do know you edited it more than we are able to see. Something else changed somewhere allowing what should have worked all along and works now.

I hope you found this post useful.

1 Like