WebDriver UDF - Help & Support

[Hamburgo]

@Danp2 Yes, I must only replace "&" with "&" and all is well.

[Hamburgo]

Please have a look at the picturre. It shows a table to declare the salary for employees.

This table is a sortable grid from jquery. In each line in the rows Gehalt, Stunden and Stundenlohn are buttons looks like a pen.

After a click on one of these buttons the application open a modal-form to modify the value of this row by each employee. To

handle the modal forms will not be so difficult.

A look in the source-code of page shows that the buttons are not in the grid. They will be overlay by javascript functions.

Has anybody a idea how can I click each of the pen-buttons by each employee ?

If you are needing more informations or ditails, please let me know.

Many thanks

[Hamburgo]

Here are the line from the employee with the Personalnummer 68:

expandcollapse popup

<tr data-id="6" class="even">
 <td class="grid-data locked sortable grid-center grid-employee-number noescape EmployeeNumber " data-tag="col_Id" data-json="{&quot;Id&quot;:68,&quot;LastName&quot;:&quot;Berg&quot;,&quot;FirstName&quot;:&quot;Leon Benjamin&quot;,&quot;Salary&quot;:725,&quot;Hours&quot;:-1,&quot;HourlyRate&quot;:-1,&quot;RegularHours&quot;:-1,&quot;Overtime&quot;:-1,&quot;OvertimePremium&quot;:-1,&quot;Surcharge&quot;:0,&quot;Total&quot;:&quot;&quot;}">
68
 </td>
 <td class="grid-data locked sortable grid-left grid-medium-150 noescape FirstName " data-tag="col_FirstName">
Leo
 </td>
 <td class="grid-data locked sortable grid-left noescape LastName " data-tag="col_LastName">
Ber
 </td>
 <td class="grid-data locked sortable grid-right text-right Salary  editable" data-tag="col_Salary">
725,00
 </td>
 <td class="grid-data locked sortable grid-right text-right Hours " data-tag="col_Hours">
 </td>
 <td class="grid-data locked sortable grid-right text-right HourlyRate " data-tag="col_HourlyRate">
 </td>
 <td class="grid-data locked grid-right text-right surcharge editable" data-tag="col_Surcharge">
0,00
 </td>
 <td class="grid-data locked grid-right" data-tag="col_Total">
0,00
 </td>
 <td class="grid-data locked grid-small grid-center noescape actionmenu-absence">
  <a class="UILink font-size-m" data-ui-widget="UILink" data-target="actionmenu_68" target="_parent">
   <span><i class="fa fa-ellipsis-h fa-grid sage-green"></i></span>
  </a>
  <div id="proxy-reserve">
   <div class="UIPopOver UIPopOverSwapped" data-tag="actionmenu_68" data-target="actionlink_68" data-ui-widget="UIPopOver">
    <div class="pointer" style="right:25px"></div>
    <div class="content actions left">
     <a class="action" href="#" data-tag="trigger_surcharge">
      <i class="fa fa-edit"></i>
      &nbsp;Zuschläge bearbeiten
     </a>
     <a class="action" href="#" data-tag="trigger_new_surcharge">
      <i class="fa fa-edit"></i>
      &nbsp;Neuen Zuschlag-/Abzug hinzufügen
     </a>
    </div>
   </div>
  </div>
 </td>
</tr>

 

[Danp2]

55 minutes ago, Hamburgo said:

A look in the source-code of page shows that the buttons are not in the grid. They will be overlay by javascript functions.

Chances are that these button are being controlled by CSS. Look at the cell definition and notice that each one with a button has a class containing "editable".

[Hamburgo]

Thanks for the tip, but the cells col_Hours and col_HourlyRate do not have "editable", but they have the button.

Edited April 3, 2019 by Hamburgo

[Danp2]

12 minutes ago, Hamburgo said:

Thanks for the tip, but the cells col_Hours and col_HourlyRate do not have "editable", but they have the button.

Not AFAICS in the example HTML you posted.

[Hamburgo]

Sorry, you are right. The following example show what you wrote:
 

expandcollapse popup

<tr data-id="11" class="odd">
 <td class="grid-data locked sortable grid-center grid-employee-number noescape EmployeeNumber " data-tag="col_Id" data-json="{&quot;Id&quot;:54,&quot;LastName&quot;:&quot;Spo&quot;,&quot;FirstName&quot;:&quot;Mic&quot;,&quot;Salary&quot;:-1,&quot;Hours&quot;:168,&quot;HourlyRate&quot;:10.56,&quot;RegularHours&quot;:168,&quot;Overtime&quot;:0,&quot;OvertimePremium&quot;:0,&quot;Surcharge&quot;:-20,&quot;Total&quot;:1774.08}">
54
 </td>
 <td class="grid-data locked sortable grid-left grid-medium-150 noescape FirstName " data-tag="col_FirstName">
Mic
 </td>
 <td class="grid-data locked sortable grid-left noescape LastName " data-tag="col_LastName">
Spo
 </td>
 <td class="grid-data locked sortable grid-right text-right Salary " data-tag="col_Salary">
 </td>
 <td class="grid-data locked sortable grid-right text-right Hours  editable" data-tag="col_Hours">
168,00
 </td>
 <td class="grid-data locked sortable grid-right text-right HourlyRate  editable" data-tag="col_HourlyRate">
10,56
 </td>
 <td class="grid-data locked grid-right text-right surcharge editable" data-tag="col_Surcharge">
-20,00
 </td>
 <td class="grid-data locked grid-right" data-tag="col_Total">
1.774,08
 </td>
 <td class="grid-data locked grid-small grid-center noescape actionmenu-absence">
  <a class="UILink font-size-m" data-ui-widget="UILink" data-target="actionmenu_54" target="_parent">
   <span><i class="fa fa-ellipsis-h fa-grid sage-green"></i></span>
  </a>
  <div id="proxy-reserve">
   <div class="UIPopOver UIPopOverSwapped" data-tag="actionmenu_54" data-target="actionlink_54" data-ui-widget="UIPopOver">
    <div class="pointer" style="right:25px"></div>
    <div class="content actions left">
     <a class="action" href="#" data-tag="trigger_surcharge">
      <i class="fa fa-edit"></i>
      &nbsp;Zuschläge bearbeiten
     </a>
     <a class="action" href="#" data-tag="trigger_new_surcharge">
      <i class="fa fa-edit"></i>
      &nbsp;Neuen Zuschlag-/Abzug hinzufügen
     </a>
    </div>
   </div>
  </div>
 </td>
</tr>

 

[Danp2]

Take a look at the underlying CSS declarations to try to get an understanding of how it works. Have you tried using the element selector in the Developer Tools to "pick" one of the buttons and then examining it's coding?

Since I can't access the site, I'm not going to be able to offer much help going forward.

[Hamburgo]

Yes, I have had a look in the Developer Tools and tried to learn how it works.

But my skill of css is not height enough to understand how it works in details.

What I understood is and this is similar to my experiences by live clicking on this page, every whole cell with the css-property "editable" works like a button.

 

[Danp2]

Do you know which jQuery library is being used to produce this grid? Can you find another publicly accessible website using this same library?

[Hamburgo]

@Danp2 I am successful !😀

I am be able to click on each cell in the different rows at this table that has a amount of salary, to open the modal form for changing the value.

It is as I wrote, yesterday. The whole cell with the css-property "editable" works like a button.

I am only needing the id of the td-element and have to click on it and the modal-form will open.

I believe that the rest will be a little bit easier, to store the values etc.

Very helpful to find this solution was the function _WD_HighlightElement: I am modifying it a little bit, to be able to use different colors.

Func _WD_HighlightElement($sSession, $sElement, $sColor="red", $iMethod = 1)
    Local Const $aMethod[] = ["border: 2px dotted " & $sColor, _
            "background: #FFFF66; border-radius: 5px; padding-left: 3px;", _
            "border:2px dotted  red;background: #FFFF66; border-radius: 5px; padding-left: 3px;"]
    If $iMethod < 1 Or $iMethod > 3 Then $iMethod = 1
    Local $sJsonElement = '{"' & $_WD_ELEMENT_ID & '":"' & $sElement & '"}'
    Local $sResponse = _WD_ExecuteScript($sSession, "arguments[0].style='" & $aMethod[$iMethod - 1] & "'; return true;", $sJsonElement)
    Local $sJSON = Json_Decode($sResponse)
    Local $sResult = Json_Get($sJSON, "[value]")
    Return ($sResult = "true" ? SetError(0, 0, $sResult) : SetError(1, 0, False))
EndFunc   ;==>_WD_HighlightElement

 

[Hamburgo]

@Danp2 Now, I am be able to input values in this table as I need.

Many thanks for your support.

Kind regards

Hamburgo

[caramen]

Hello @Danp2 And everyone else Could you help me to have a working syntax with a strange element I have. Please 🤗

 

I tryed a lot of things but i ll stick with this fail attemp here : 

$sElement0 = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//input[@class='form_input_undefined']") ; SERVICE

$sElement0 = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//input[@tabindex='0']") ; SERVICE

When all I have for this element is : 

<input type="text" 
aria-label="autocomplete" 
autocomplete="off" 
class="form_input_undefined"
tabindex="0" 
aria-labelledby="label_AM_RECIPIENT.LAST_NAME" 
style="display: inline-block; width: 200px;">

Thanks all

[Hamburgo]

@caramen for me both are works.

But only if enter it manual in the editor.

If I enter it in the editor by copy & paste, than the 2nd one fails.

It has a question-mark in front of the equal sign.

I do not know, if you have the same error.

Output in the console:

>"D:\Develop\AutoIT\SciTE\..\autoit3.exe" /ErrorStdOut "D:\Develop\AutoIT\FireFox\WebDriver\WebDriver-TestPage.au3"    
D:\Develop\AutoIT\FireFox\WebDriver\WebDriver-TestPage.au3 (162) : ==> Unable to parse line.:
$sElement0 ?= _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//input[@tabindex='0']")
$sElement0 ^ ERROR
>Exit code: 1    Time: 0.7262

Edited April 4, 2019 by Hamburgo

[caramen]

1 minute ago, Hamburgo said:

If I enter it in the editor by copy & paste, than the 2nd one fails.

what is the editor ?🕵️‍♂️

[Hamburgo]

I am using SciTE.exe, the standard-editor of AutoIT.

[caramen]

Just now, Hamburgo said:

I am using SciTE.exe, the standard-editor of AutoIT.

I wonder how can you test it without my web site ?

[Hamburgo]

I put your posts in my test-page for webdriver.

Can be, that is a misunterstanding, on my site .

 

Edited April 4, 2019 by Hamburgo

[caramen]

You take the problem from the wrong way Anyway thanks for your time.

From what i know you cannot do that kind of test it totaly depend of how my site is dev not of how you dev your test environement.

[Hamburgo]

ok