使用Selenium和VBA获取动态生成的HTML ID

huangapple go评论72阅读模式
英文:

Get Dynamic autogenerated HTML ID using Selenium and VBA

问题

我正在尝试使用Selenium和VBA自动化一个Web表单。该Web表单有一个搜索框,可以创建一个自动生成的列表。我知道如何输入一个值到搜索框中,并执行JavaScript来生成列表。问题是,每次列表的ID值都不同。我“认为”解决方法是使用Xpath搜索来获取ID,但我无法正确地做到这一点。

这段代码执行自动完成以生成动态列表,使用“121312”作为搜索值。这将生成仅包含1个值的列表。我搜索的值将始终限制自动完成列表为1项。因此,我们只需从自动生成的列表中获取0索引值。

$('.ui-autocomplete-input').slice(20, 21).val("121312").autocomplete('search')

这将正确地将单元格填充为自动生成列表中的值。问题在于“ui-id-6”。ui-id-XXX后面的数字每次都会不同。这就是我需要自动查找的数字。

$('#ui-id-6.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()

这是HTML检查结果。我已经在蓝色的ID值上进行了标记。除了数字外,一切都是静态的。我已经被困在这个问题上好几天了,所以非常感谢任何帮助!

HTML检查结果

我“认为”答案是使用Xpath来自动确定要点击的值,但我并不完全理解Xpath,当我检查下拉菜单然后复制Xpath时,它会给出特定的ID值,而这个值每次都会不同。

以下是从检查和复制的两个Xpath示例。

/html/body/ul[21]/li[14]/div

//*[@id="ui-id-1855"]

//*[@id="ui-id-563"]

/html/body/ul[31]

更新

所以,我从Michael M的建议中得到了一些有趣的结果。

我需要将ID搜索放在CSS选择器的开头。

$('[id^="ui-id-"].ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()

这个方法有效。但它只在第一个输入框上工作,这对我来说没有任何意义。

使用Selenium和VBA获取动态生成的HTML ID

顶部的输入框完全正确地工作了。搜索触发,然后我能够将值输入到框中。

$('[id^="ui-id-"].ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()

然后我尝试了下面几行,但什么都没有发生。

已执行JavaScript的图像
使用Selenium和VBA获取动态生成的HTML ID

前两行完美地工作。第三行是对第二个框的搜索。第四行“应该”输入搜索的值,但什么都没有发生,这一点我不明白。

英文:

I'm trying to automate a web form using Selenium and VBA. The webform has a search box that creates an autogenerated list. I know how to enter a value into the search box and execute the javascript to generate the list. The problem is the list has a different ID value every time. I "think" the solution is to use Xpath search to get the ID but I can't figure out how to do it correctly.

This executes the autocomplete to generate the dynamic list using "121312" as the search value. This will generate the list with only 1 value. The value I search on will always limit the autocomplete list to be 1 item. So we just need to get the 0 index value from the auto generated list.
$('.ui-autocomplete-input').slice(20,21).val("121312").autocomplete('search')

This will correctly fill the cell with the value from the autogenerated list. The problem is the "ui-id-6". The number after ui-id-XXX will be different every time. Thats the number I need to be able to autofind.
$('#ui-id-6.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()

Here is the HTML inspection. I've highlighted in Blue the ID value. Everything but the number is static.
I've been stuck on this for several days so any help is greatly appreciated!

Inspection of HTML

I "think" the answer is Xpath to auto determine the value to be clicked. but i don't fully understand Xpath and when I inspect the drop down then copy the Xpath its giving the specific ID value which will be different every time.

here are 2 xpath examples from inspecting and copying them.
`/html/body/ul[21]/li[14]/div

//*[@id="ui-id-1855"]

//*[@id="ui-id-563"]

/html/body/ul[31]
`

UPDATE

So I'm getting some interesting results from Michael M's suggestion

I needed to put the ID search at the start of the CSS selector.
$('[id^="ui-id-"].ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click().

This works. BUT it's only working on the first entry box. Which doesn't make any sense to me.

使用Selenium和VBA获取动态生成的HTML ID

The top entry box worked completely correctly. The search fired and then I was able to enter the value into the box with

`$('[id^="ui-id-"].ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()`   

Then I tried a box a few lines down and nothing happened at all.

Image of executed JavaScript
使用Selenium和VBA获取动态生成的HTML ID

The first 2 lines worked perfectly. The 3rd line is the search on the 2nd box. The 4th line 'should' have entered the searched value but did nothing. Which I don't understand.

答案1

得分: 1

你可以将你的 CSS 选择器更改为只匹配 ID 的开头,使用 [id^="ui-id-"](如果你愿意的话,你可以在 MDN 上找到匹配属性的规则)。这样,ID 的第一部分将匹配,它会忽略掉 ID 的其余部分。例如:

$('ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front[id^="ui-id-"]')
英文:

You can change your CSS selector to only match the start of the ID using an [id^="ui-id-"] (if you'd like, you can find all the rules for matching an attribute like this here on MDN). This way, the first part of the ID will match and it will ignore the rest of the ID. For example:

$('ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front[id^="ui-id-"]')

答案2

得分: 0

这已经关闭。我最终使用Selenium的sendKeys来发送一个向下箭头、制表符,然后在执行搜索后发送回车命令。这比每次都尝试找到动态生成的ID要容易得多。

感谢Michael M的回答。

英文:

This is closed. I ended up using Selenium sendKeys to send a down arrow, tab, then enter command after executing the search. This was far far easier then trying to find the dynamically generated ID each time.

Thank you to Michael M for answering though

huangapple
  • 本文由 发表于 2023年5月29日 10:24:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/76354344.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定