用鼠标右键单击隐藏日期的字段填充

时间:2018-07-24 16:58:27

标签: python-3.x selenium automation robotframework

我需要在字段中填写日期和 我无法获取日历的xpath-右键单击检查元素时,日历消失。
因此,我无法获取目标元素的定位符,也无法在其中写入日期: 输入文本路径10/10/2018 ==测试失败

元素路径:

在这种情况下我该怎么办?

1 个答案:

答案 0 :(得分:1)

Long read and explanation ahead; in summary - run setTimeout(function() {debugger;}, 3000); in the console while the elements are still in the DOM, and you'll be able to inspect them.


That's a tricky situation for sure, applicable to a lot of modern UI frameworks - React is probably the most common example. What the frameworks do is to keep a so-called virtual DOM, and update the real one - the browser's - on demand; e.g. the dropdown state is kept only in the memory, and only after the user clicks its parent element, just then it is written in the page's DOM and is available to the browser/user.
On click-out it disappears - it is no longer needed, shouldn't be rendered, take it out from the real DOM and store only in the virtual. And right-clicking - to bring up the Inspect Element, for instance, counts for click-out.

Getting the element while it is present is not hard (once you know how :)) - you have to intercept it while it is shown, and before it is hidden. This can be accomplished by bringing up the debugger, with a simple js function. The steps are:

0) Open up the browser's just console - you'll need it in step 2)
1) Make the element appear - click on the top element of the dropdown, or whatever is step needed
2) Execute this JavaScript in the console (explanation below):

setTimeout(function() {debugger;}, 3000);

3) Wait 3 seconds - without clicking anywhere on the page :)
4) The js debugger is now active, the frontend code will not remove any elements from the DOM - as its execution is halted
5) Inspect any element you need, get their locators etc.
6) Resume the execution from the debugger

Mind that after step 3) the "Inspect Element" right-click option is not available - you'll have to find the element in the source pretty much manually.

What does this "magic" js code do? Nothing special - it calls the function setTimeout() that will run its passed argument after that many milliseconds - so in the example "3000" is 3s, "5000" will be 5, and so on. The argument we're passing is a simple anonymous function, that has only one statement - debugger;, which starts the browser's built-in debugger.

Essentially, it reads - "In 3000 milliseconds from now start the debugger". And as at that time you haven't clicked-out, your needed elements are still in the DOM and can be inspected.