Dragging and dropping web elements

ThomasBennett · September 30, 2022

Good morning, everyone,

I have had very good luck with using _WD_ElementActionEx 'CLICKANDHOLD'. What would be the best practice with dragging and dropping web elements? I would prefer to not to have to use any dragging and dropping but I haven't figured out a way to change the order the elements are displayed programmatically.

I have a list of elements that are drag and drop. These elements in code are using <UL></UL> for the entire list and the actual web elements that are being manipulated are in <LI></LI> tags. These do not look like a bulleted list but that is the code that is being used. I've spoken with the web developer and there isn't any hot keys or keyboard commands that can be used to move these elements.

I know where the new and original web element appears and can select them using the _WD_WaitElement and _WD_FindElement combo. I can find the number of items in the list by looking at the code; I haven't started pulling the values out just yet. I am trying to figure out if there is a place to change the listed order.

Using the 'CLICKANDHOLD' feature as part of _WD_ElementActionEx does work and I know more or less where I need to drop it the new web element; the problem I am having is scrolling exactly to where I need the new web element dropped. It should be dropped beneath the original web element.

What's the best method to output the number of children associated with the <UL></UL>? I am guessing that _WD_ElementActionEx 'CHILDCOUNT' would be it; but I haven't figured out how to get the call to output in a msgbox or in the console.

#cs ----------------------------------------------------------------
Name ..........: Please Note!.au3
Description ...: To be used to add new lessons to existing playlists and to update the pre-existing lesson with the Please Note! PowerPoint
SciTE 32-bit ..: Version 4.4.6
Author(s) .....: Thomas E. Bennett
Date ..........: 20220929

Recommended Reading / Requirements
https://www.autoitscript.com/forum/topic/191990-webdriver-udf-w3c-compliant-version-01162021/#comments
https://www.autoitscript.com/wiki/WebDriver
https://www.autoitscript.com/wiki/WebDriver#Installation
https://www.autoitscript.com/wiki/Adding_UDFs_to_AutoIt_and_SciTE
https://www.autoitscript.com/autoit3/docs/intro/running.htm#CommandLine
wd_core.au3
wd_helper.au3

From wd_core.au3
Global Const $_WD_LOCATOR_ByCSSSelector = "css selector"
Global Const $_WD_LOCATOR_ByXPath = "xpath"
Global Const $_WD_LOCATOR_ByLinkText = "link text"
Global Const $_WD_LOCATOR_ByPartialLinkText = "partial link text"
Global Const $_WD_LOCATOR_ByTagName = "tag name"
#ce ----------------------------------------------------------------

#include "wd_core.au3"
#include "wd_helper.au3"
#include <MsgBoxConstants.au3>
#include <Excel.au3>
#include <AutoItConstants.au3>

Local $sDesiredCapabilities, $sSession, $sElement

; Create application object and open an example workbook
Local $oExcel = _Excel_Open()
If @error Then Exit MsgBox($MB_SYSTEMMODAL, "Excel UDF: _Excel_RangeRead Example", "Error creating the Excel application object." & @CRLF & "@error = " & @error & ", @extended = " & @extended)
Local $oWorkbook = _Excel_BookOpen($oExcel, @ScriptDir & "\{PRIVACY}.xlsx")
If @error Then
        MsgBox($MB_SYSTEMMODAL, "Excel UDF: _Excel_RangeRead Example", "Error opening workbook '" & @ScriptDir & "\{PRIVACY}.xlsx'." & @CRLF & "@error = " & @error & ", @extended = " & @extended)
        _Excel_Close($oExcel)
        Exit
EndIf

; Read data from a single cell on the active sheet of the specified workbook
;Local $sResult = _Excel_RangeRead($oWorkbook, Default, "A1")
;If @error Then Exit MsgBox($MB_SYSTEMMODAL, "Excel UDF: _Excel_RangeRead Example 1", "Error reading from workbook." & @CRLF & "@error = " & @error & ", @extended = " & @extended)
;MsgBox($MB_SYSTEMMODAL, "Excel UDF: _Excel_RangeRead Example 1", "Data successfully read." & @CRLF & "Value of cell A1: " & $sResult)

SetupChrome()
_WD_Startup()
$sSession = _WD_CreateSession($sDesiredCapabilities)

Sleep (15000)

Local $aResult = _Excel_RangeRead($oWorkbook, Default, "A16:E16")
For $i = 0 To UBound($aResult, 1) - 1
    ;ConsoleWrite("========= Start Row =========" & @CRLF)
    ;ConsoleWrite($aResult[$i][0] & @CRLF) ; Column A -- Course Playlist Number
    ;ConsoleWrite($aResult[$i][1] & @CRLF) ; Column B -- Course Playlist Title
    ;ConsoleWrite($aResult[$i][2] & @CRLF) ; Column C -- Original Lesson Title
    ;ConsoleWrite($aResult[$i][3] & @CRLF) ; Column D -- Updated Lesson Number
    ;ConsoleWrite($aResult[$i][4] & @CRLF) ; Column E -- Updated Lesson Title
    ;ConsoleWrite("========= End Row =========" & @CRLF & @CRLF)

_WD_Navigate($sSession, "{PRIVACY}" & $aResult[$i][0])
_WD_LoadWait($sSession, 2000)


; Find the Available Lessons search box and enter the appropriate value
_WD_WaitElement($sSession, $_WD_LOCATOR_ByXPath, "//input[@id='titleSearch']")
$sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//input[@id='titleSearch']")
; Click the Sign in button
_WD_ElementAction($sSession, $sElement, 'value', $aResult[$i][3])
Send("{Enter}")

; Find the correct "Add" hyperlink
_WD_WaitElement($sSession, $_WD_LOCATOR_ByXPath, "//span[text()='" & $aResult[$i][4] & "']/following-sibling::div")
$sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//span[text()='" & $aResult[$i][4] & "']/following-sibling::div")
; Click the "Add" hyperlink
_WD_ElementAction($sSession, $sElement, 'click')

; Number of Child Elements
_WD_WaitElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']")
$sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']")
_WD_ElementActionEx($sSession, $sElement, 'CHILDCOUNT')

Exit

; Click and Hold the appropriate element
_WD_WaitElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']//span[@class='item-description' and text()='" & $aResult[$i][4] & "']/parent::li")
$sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']//span[@class='item-description' and text()='" & $aResult[$i][4] & "']/parent::li")
_WD_ElementActionEx($sSession, $sElement, 'clickandhold', 0, 0, 0, 10000)

; Hover the appropriate element
_WD_WaitElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']//span[@class='item-description' and text()='" & $aResult[$i][4] & "']/following-sibling::a")
$sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']//span[@class='item-description' and text()='" & $aResult[$i][4] & "']/following-sibling::a")
_WD_ElementActionEx($sSession, $sElement, 'HOVER')

Exit

Next

Exit

_WD_DeleteSession($sSession)
_WD_Shutdown()
Exit

Func SetupChrome()
; Google Chrome
_WD_Option('Driver', "C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe")

_WD_Option('Port', 9515)
;_WD_Option('DriverParams', '--verbose --log-path="' & @ScriptDir & '\chrome.log"')

$sDesiredCapabilities = '{"capabilities": {"alwaysMatch": {"unhandledPromptBehavior": "ignore", ' & _
    '"goog:chromeOptions": {"w3c": true, "excludeSwitches": ["enable-automation"], "useAutomationExtension": false, ' & _
    '"prefs": {"credentials_enable_service": false},' & _
    '"args": ["start-maximized"] }}}}'
EndFunc

Console Output

>"C:\Program Files (x86)\AutoIt3\SciTE\..\AutoIt3.exe" "C:\Program Files (x86)\AutoIt3\SciTE\AutoIt3Wrapper\AutoIt3Wrapper.au3" /run /prod /ErrorStdOut /in "C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3" /UserParams    
+>09:22:40 Starting AutoIt3Wrapper (21.316.1639.1) from:SciTE.exe (4.4.6.0)  Keyboard:00000409  OS:WIN_10/2009  CPU:X64 OS:X64  Environment(Language:0409)  CodePage:0  utf8.auto.check:4
+>         SciTEDir => C:\Program Files (x86)\AutoIt3\SciTE   UserDir => C:\Users\thomas.bennett\AppData\Local\AutoIt v3\SciTE\AutoIt3Wrapper   SCITE_USERHOME => C:\Users\thomas.bennett\AppData\Local\AutoIt v3\SciTE 
>Running AU3Check (3.3.14.5)  from:C:\Program Files (x86)\AutoIt3  input:C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3
+>09:22:40 AU3Check ended.rc:0
>Running:(3.3.14.5):C:\Program Files (x86)\AutoIt3\autoit3.exe "C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3"    
+>Setting Hotkeys...--> Press Ctrl+Alt+Break to Restart or Ctrl+BREAK to Stop.
_WD_Option ==> Success [0] : Parameters:   Option=Driver   Value=C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe
_WD_Option ==> Success [0] : Parameters:   Option=Port   Value=9515
_WD_IsLatestRelease ==> Success [0] : True
_WD_Startup: OS:    WIN_10 WIN32_NT 22000 
_WD_Startup: AutoIt:    3.3.14.5
_WD_Startup: Webdriver UDF: 0.10.1 (Up to date)
_WD_Startup: WinHTTP:   1.6.4.2
_WD_Startup: Driver:    C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe (32 Bit)
_WD_Startup: Params:    
_WD_Startup: Port:  9515
_WD_Startup: Command:   "C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe"  
_WD_Startup ==> Success [0]
__WD_Post ==> Success [0] : HTTP status = 200
_WD_CreateSession ==> Success [0] : 2542b35e47b8f9b2558cd92ad1418811
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL={PRIVACY}
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Username']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Username']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Password']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Password']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@value='Sign In']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@value='Sign In']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=click   Option=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL={PRIVACY}
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL={PRIVACY}
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='titleSearch']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='titleSearch']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Timeout [7] : Parameters:   Strategy=xpath   Selector=//span[text()='{PRIVACY}']/following-sibling::div   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> No match [8] : HTTP status = 404
_WD_FindElement ==> No match [8] : Parameters:   Strategy=xpath   Selector=//span[text()='{PRIVACY}']/following-sibling::div   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> No match [8] : HTTP status = 404
_WD_ElementAction ==> No match [8] : Parameters:   Command=click   Option=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//ul[@id='selected-items']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//ul[@id='selected-items']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ExecuteScript ==> Success [0]
_WD_ElementActionEx ==> Success [0] : Parameters:    Element=21c01052-8b86-4058-b8f6-d9dfa750f9ee    Command=CHILDCOUNT    XOffset=Default    YOffset=Default    Button=Default    HoldDelay=Default    Modifier=Default
+>09:23:20 AutoIt3.exe ended.rc:0
+>09:23:20 AutoIt3Wrapper Finished.
>Exit code: 0    Time: 40.88

My thought is once AutoIt knows how many child elements there are; I am hoping that there would be a way to change the sort or priority order that the <LI></LI>'s are shown in.

Thank you for your time and efforts on this and as I progress I'll update this topic,

Thomas

Edited September 30, 2022 by ThomasBennett
Posted wrong code and console output.

Danp2 · September 30, 2022

11 minutes ago, ThomasBennett said:

_WD_ElementActionEx($sSession, $sElement, 'CHILDCOUNT')

Assign the result of this command to a variable. Then you can use it for further processing.

FWIW, I'm not sure that CLICKANDHOLD will work for your scenario. You will likely need to use _WD_Action with a custom set of actions. Another possibility is to add a CLICKANDDRAG option to _WD_ElementActionEx.

Finally, you may be able to use _WD_ExecuteScript to initiate the list reordering, but this would require an understanding of the Javascript that is being executed behind the scenes.

Danp2 · September 30, 2022

31 minutes ago, ThomasBennett said:

I would prefer to not to have to use any dragging and dropping but I haven't figured out a way to change the order the elements are displayed programmatically.
<snip>
I've spoken with the web developer and there isn't any hot keys or keyboard commands that can be used to move these elements.

The web developer should be able to assist with programmatically reordering the list. It looks like s/he may be using the jQuery UI widgets. See if that's correct.

ThomasBennett · September 30, 2022

21 minutes ago, Danp2 said:

Assign the result of this command to a variable. Then you can use it for further processing.

Thank you, that's what I needed!

; Number of Child Elements
_WD_WaitElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']")
$sElement = _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, "//ul[@id='selected-items']")
Local $iCount = _WD_ElementActionEx($sSession, $sElement, 'CHILDCOUNT')

MsgBox(0, $iCount, $iCount)

Edited September 30, 2022 by ThomasBennett
Added the code that is being used; may be helpful to others.

ThomasBennett · September 30, 2022

1 minute ago, Danp2 said:

The web developer should be able to assist with programmatically reordering the list. It looks like s/he may be using the jQuery UI widgets. See if that's correct.

They are using jQuery UI widgets. I'll see if I can get any assistance from them. I am researching some JavaScript and _WD_ExecuteScript; I think I've found some JavaScript code that would suite my needs: https://stackoverflow.com/questions/7742305/changing-the-order-of-elements

(() => {
  const list = document.querySelector("ul");
  list.appendChild(list.firstElementChild);
})();

Thank you,

Thomas

Danp2 · September 30, 2022

Maybe this will help you -- https://stackoverflow.com/questions/64083196/programmatically-sort-jquery-ui-sortable

Edit: This demo looks promising -- http://jsfiddle.net/4mdmF/

Edited September 30, 2022 by Danp2

ThomasBennett · September 30, 2022

While waiting on confirmation from the web designer that they are indeed using jQuery UI widgets (saw it earlier in the code so jumped to the assumption) if this JavaScript code worked is this correct way to format it?

_WD_ExecuteScript($sSession, 'const list = document.querySelector("ul"); list.appendChild(list.firstElementChild);')

Original Code

(() => {
  const list = document.querySelector("ul");
  list.appendChild(list.firstElementChild);
})();

I feel like I am not formatting this correctly for _WD_ExecuteScript to be able to its job. Trying to keep it simple from a troubleshooting standpoint.

Thank you,

Thomas

ThomasBennett · September 30, 2022

Probably too excited for my own good.. but.. something is moving around 😁

_WD_ExecuteScript($sSession, 'const list = document.querySelector("#selected-items"); list.appendChild(list.firstElementChild);')

Trying to determine a method to this madness.

Thomas

ThomasBennett · September 30, 2022

@Danp2, Confirmed that they are using JQuery UI Widgets. Also, they're busy with other developments and won't be able to assist with the sorting I am trying to do.

Thank you,

Thomas

Danp2 · September 30, 2022

My concern with doing it that way is that jQuery doesn't know about the change and will likely be out of sync. Did you look at the earlier JSFiddle link I posted? I believe that is the correct way to handle this.

ThomasBennett · September 30, 2022

2 minutes ago, Danp2 said:

My concern with doing it that way is that jQuery doesn't know about the change and will likely be out of sync. Did you look at the earlier JSFiddle link I posted? I believe that is the correct way to handle this.

No worries, @Danp2 I will be going with your suggestion. Yes, I have looked at the JSFiddle link that you posted and I am figuring out how to get that working as we speak. I was just excited to see some movement of the web elements. Wanted to keep it simple for myself to see some output; saw the output got giddy and went back to JSFiddle. That was the order of operations.

Thank you,

Thomas

ThomasBennett · September 30, 2022

This appears to be working correctly in JSFiddle

http://jsfiddle.net/bhndj5zx/55/

HTML

<ul id='selected-items'>
  <li class='item'>Original Lesson</li>
  <li class='item'>Lesson 2</li>
  <li class='item'>Lesson 3</li>
  <li class='item'>Lesson 4</li>
  <li class='item'>Lesson 5</li>
  <li class='item'>New Lesson</li>
</ul>
<button id="add">add</button>
<p>
    Clicking the "Add" button should move item 2 after item 3 (i.e. they switch positions).<br>
    After that the defined "update" callback from the sortable is called and should add the text " (update called)" to the moved item.<br>
    Pushing the button twice would then lead to " (update called)" being attached to item 2 and 3.
</p>

JavaScript

$('#selected-items').sortable({
  update:function(event, ui){
    //ui.item.append(' (update called)');
  }
});

$('#add').click(function() {
  var $moveItem =  $("li:contains('Original')");
  $('#selected-items').sortable('option','update')(null, {
    item: $($moveItem).after($("li:contains('New')"))
  });
});

Now to get it into AutoIt and test it out. Going to lunch first.

Thank you,

Thomas

ThomasBennett · September 30, 2022

Console Output

>"C:\Program Files (x86)\AutoIt3\SciTE\..\AutoIt3.exe" "C:\Program Files (x86)\AutoIt3\SciTE\AutoIt3Wrapper\AutoIt3Wrapper.au3" /run /prod /ErrorStdOut /in "C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3" /UserParams    
+>14:32:22 Starting AutoIt3Wrapper (21.316.1639.1) from:SciTE.exe (4.4.6.0)  Keyboard:00000409  OS:WIN_10/2009  CPU:X64 OS:X64  Environment(Language:0409)  CodePage:0  utf8.auto.check:4
+>         SciTEDir => C:\Program Files (x86)\AutoIt3\SciTE   UserDir => C:\Users\thomas.bennett\AppData\Local\AutoIt v3\SciTE\AutoIt3Wrapper   SCITE_USERHOME => C:\Users\thomas.bennett\AppData\Local\AutoIt v3\SciTE 
>Running AU3Check (3.3.14.5)  from:C:\Program Files (x86)\AutoIt3  input:C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3
+>14:32:22 AU3Check ended.rc:0
>Running:(3.3.14.5):C:\Program Files (x86)\AutoIt3\autoit3.exe "C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3"    
+>Setting Hotkeys...--> Press Ctrl+Alt+Break to Restart or Ctrl+BREAK to Stop.
_WD_Option ==> Success [0] : Parameters:   Option=Driver   Value=C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe
_WD_Option ==> Success [0] : Parameters:   Option=Port   Value=9515
_WD_IsLatestRelease ==> Success [0] : True
_WD_Startup: OS:    WIN_10 WIN32_NT 22000 
_WD_Startup: AutoIt:    3.3.14.5
_WD_Startup: Webdriver UDF: 0.10.1 (Up to date)
_WD_Startup: WinHTTP:   1.6.4.2
_WD_Startup: Driver:    C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe (32 Bit)
_WD_Startup: Params:    
_WD_Startup: Port:  9515
_WD_Startup: Command:   "C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe"  
_WD_Startup ==> Success [0]
__WD_Post ==> Success [0] : HTTP status = 200
_WD_CreateSession ==> Success [0] : ff9112dfef48dc818c5ab867e437b9f8
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL={PRIVACY}
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Username']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Username']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Password']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Password']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@value='Sign In']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@value='Sign In']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=click   Option=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL=https://login.icevonline.com/admin/coursePlaylists
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL=https://login.icevonline.com/Admin/coursePlaylists/Edit/173221
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='titleSearch']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='titleSearch']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//span[text()='Hot Topics: Drones in Agriculture - UPDATE']/following-sibling::div   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//span[text()='Hot Topics: Drones in Agriculture - UPDATE']/following-sibling::div   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=click   Option=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//ul[@id='selected-items']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//ul[@id='selected-items']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ExecuteScript ==> Success [0]
_WD_ElementActionEx ==> Success [0] : Parameters:    Element=0fcb990e-08b1-4cba-8162-f2dd715efe97    Command=CHILDCOUNT    XOffset=Default    YOffset=Default    Button=Default    HoldDelay=Default    Modifier=Default
__WD_Post ==> Javascript Exception [21] : HTTP status = 500
_WD_ExecuteScript ==> Javascript Exception [21] : Error occurred when trying to ExecuteScript
+>14:32:56 AutoIt3.exe ended.rc:0
+>14:32:56 AutoIt3Wrapper Finished.
>Exit code: 0    Time: 35.09

_WD_ExecuteScript (one long line of JavaScript)

_WD_ExecuteScript($sSession, '$("#selected-items").sortable({update:function(event, ui)}); var $moveItem =  $("li:contains('& $aResult[$i][2] &')"); $("#selected-items").sortable("option","update")(null,{item: $($moveItem).after($("li:contains('& $aResult[$i][4] &')"))});')

I get "Javascript Exception [21] : Error occurred when trying to ExecuteScript. I feel like the formatting is causing a problem; is there anyway I can execute multiple lines of JavaScript code through _WD_ExecuteScript ?

Thank you,

Thomas

ThomasBennett · September 30, 2022

Some very good news; the code below has been tested and does provide the desired output.

Should I be worried about the Uncaught TypeError? I am guessing it doesn't know about jQuery?

var $moveItem =  $("#selected-items li:contains('Hot Topics - Drones in Agriculture')");
  $('#selected-items').sortable('option','update')(null, {
    item: $($moveItem).after($("#selected-items li:contains('Hot Topics: Drones in Agriculture - UPDATE')"))
  });
  
$('#selected-items').sortable({
  update:function(event, ui){
    //ui.item.append(' (update called)');
  }
});

Desired Output (these are two of the web elements I've been describing)

image.png.066b596c76693de453efe5e3f96bb802.png

How should I format this code to work within _WD_ExecuteScript ?

Thank you for your time on this,

Thomas

Danp2 · September 30, 2022

45 minutes ago, ThomasBennett said:

I get "Javascript Exception [21] : Error occurred when trying to ExecuteScript. I feel like the formatting is causing a problem; is there anyway I can execute multiple lines of JavaScript code through _WD_ExecuteScript ?

It should work as long as the code is formatted properly.

Quote

Should I be worried about the Uncaught TypeError?

Yes, I believe that would be problematic.

ThomasBennett · September 30, 2022

5 minutes ago, Danp2 said:

It should work as long as the code is formatted properly.

What's the proper format? Is multi-line allowed for one _WD_ExecuteScript? Or should each line be separated as a single-line go with a _WD_ExecuteScript?

Multi-line

_WD_ExecuteScript($sSession, '
var $moveItem =  $("#selected-items li:contains('Hot Topics - Drones in Agriculture')");
  $('#selected-items').sortable('option','update')(null, {
    item: $($moveItem).after($("#selected-items li:contains('Hot Topics: Drones in Agriculture - UPDATE')"))
  });

$('#selected-items').sortable({
  update:function(event, ui){
    //ui.item.append(' (update called)');
  }
});')

Single-line

_WD_ExecuteScript($sSession, 'var $moveItem =  $("#selected-items li:contains('Hot Topics - Drones in Agriculture')");')
_WD_ExecuteScript($sSession, '$("#selected-items").sortable("option","update")(null, {item: $($moveItem).after($("#selected-items li:contains("Hot Topics: Drones in Agriculture - UPDATE")"))});')
_WD_ExecuteScript($sSession, '$("#selected-items").sortable({update:function(event, ui){}});')

Thank you,

Thomas

Danp2 · September 30, 2022

I don't recall testing this, but your multiline example isn't valid AutoIt syntax. It would be like trying to write this --

$sText = '
var $moveItem =  $("#selected-items li:contains('Hot Topics - Drones in Agriculture')");
  $('#selected-items').sortable('option','update')(null, {
    item: $($moveItem).after($("#selected-items li:contains('Hot Topics: Drones in Agriculture - UPDATE')"))
  });

$('#selected-items').sortable({
  update:function(event, ui){
    //ui.item.append(' (update called)');
  }
});'

To be valid, you would need to concatenate the lines --

$sText = "'" & _
"var $moveItem =  $("#selected-items li:contains('Hot Topics - Drones in Agriculture')");" & _
"  $('#selected-items').sortable('option','update')(null, {
"    item: $($moveItem).after($("#selected-items li:contains('Hot Topics: Drones in Agriculture - UPDATE')"))" & _
"  });" & _
"" & _
"$('#selected-items').sortable({" & _
"  update:function(event, ui){" & _
"    //ui.item.append(' (update called)');" & _
"  }" & _
"});'"

The above won't work as-is because your original code contains double quotes, but hopefully you get the gist of what I was trying to say.

Danp2 · September 30, 2022

This works AFAICS --

$sMovejQuery = """li:contains('New Lesson')"""
    $sDestjQuery = """li:contains('Original Lesson')"""
    $sArguments = $sDestjQuery & ", " & $sMovejQuery
    $sJavascript = '$("#selected-items").sortable("option","update")(null,{item: $(arguments[0]).after($(arguments[1]))});'

    _WD_ExecuteScript($sSession, $sJavaScript, $sArguments)

ThomasBennett · September 30, 2022

Console Output

>"C:\Program Files (x86)\AutoIt3\SciTE\..\AutoIt3.exe" "C:\Program Files (x86)\AutoIt3\SciTE\AutoIt3Wrapper\AutoIt3Wrapper.au3" /run /prod /ErrorStdOut /in "C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3" /UserParams    
+>17:00:07 Starting AutoIt3Wrapper (21.316.1639.1) from:SciTE.exe (4.4.6.0)  Keyboard:00000409  OS:WIN_10/2009  CPU:X64 OS:X64  Environment(Language:0409)  CodePage:0  utf8.auto.check:4
+>         SciTEDir => C:\Program Files (x86)\AutoIt3\SciTE   UserDir => C:\Users\thomas.bennett\AppData\Local\AutoIt v3\SciTE\AutoIt3Wrapper   SCITE_USERHOME => C:\Users\thomas.bennett\AppData\Local\AutoIt v3\SciTE 
>Running AU3Check (3.3.14.5)  from:C:\Program Files (x86)\AutoIt3  input:C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3
+>17:00:08 AU3Check ended.rc:0
>Running:(3.3.14.5):C:\Program Files (x86)\AutoIt3\autoit3.exe "C:\Users\thomas.bennett\Desktop\AutoIt\Please Note!\Please Note!.au3"    
+>Setting Hotkeys...--> Press Ctrl+Alt+Break to Restart or Ctrl+BREAK to Stop.
var $moveItem = $("#selected-items li:contains('Hot Topics - Drones in Agriculture')");$('#selected-items').sortable('option','update')(null, {item: $($moveItem).after($("#selected-items li:contains('Hot Topics: Drones in Agriculture - UPDATE')"))});$('#selected-items').sortable({update:function(event, ui){}});
_WD_Option ==> Success [0] : Parameters:   Option=Driver   Value=C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe
_WD_Option ==> Success [0] : Parameters:   Option=Port   Value=9515
_WD_IsLatestRelease ==> Success [0] : True
_WD_Startup: OS:    WIN_10 WIN32_NT 22000 
_WD_Startup: AutoIt:    3.3.14.5
_WD_Startup: Webdriver UDF: 0.10.1 (Up to date)
_WD_Startup: WinHTTP:   1.6.4.2
_WD_Startup: Driver:    C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe (32 Bit)
_WD_Startup: Params:    
_WD_Startup: Port:  9515
_WD_Startup: Command:   "C:\Users\thomas.bennett\Desktop\AutoIt\include\chromedriver.exe"  
_WD_Startup ==> Success [0]
__WD_Post ==> Success [0] : HTTP status = 200
_WD_CreateSession ==> Success [0] : 1303578e9189aa27a31c4c28ae03e113
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL={PRIVACY}
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Username']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Username']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Password']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='Password']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@value='Sign In']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@value='Sign In']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=click   Option=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL={PRIVACY}
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_Navigate ==> Success [0] : Parameters:   URL={PRIVACY}
_WD_LoadWait ==> Success [0] : Parameters:    Delay=2000    Timeout=Default    Element=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='titleSearch']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//input[@id='titleSearch']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=value   Option=<masked>
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//span[text()='Hot Topics: Drones in Agriculture - UPDATE']/following-sibling::div   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//span[text()='Hot Topics: Drones in Agriculture - UPDATE']/following-sibling::div   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ElementAction ==> Success [0] : Parameters:   Command=click   Option=Default
_WD_WaitElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//ul[@id='selected-items']   Delay=Default   Timeout=Default   Options=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_FindElement ==> Success [0] : Parameters:   Strategy=xpath   Selector=//ul[@id='selected-items']   StartNodeID=Default   Multiple=Default   ShadowRoot=Default
__WD_Post ==> Success [0] : HTTP status = 200
_WD_ExecuteScript ==> Success [0]
_WD_ElementActionEx ==> Success [0] : Parameters:    Element=a39a3227-548c-4f3f-9713-3975934c82a0    Command=CHILDCOUNT    XOffset=Default    YOffset=Default    Button=Default    HoldDelay=Default    Modifier=Default
__WD_Post ==> Javascript Exception [21] : HTTP status = 500
_WD_ExecuteScript ==> Javascript Exception [21] : Error occurred when trying to ExecuteScript
+>17:00:44 AutoIt3.exe ended.rc:0
+>17:00:44 AutoIt3Wrapper Finished.
>Exit code: 0    Time: 37.9

AutoIt Code

Local $sJavaScript = "var $moveItem = $(""#selected-items li:contains('" & $aResult[$i][2] & "')"");" & _
"$('#selected-items').sortable('option','update')(null, {item: $($moveItem).after($(""#selected-items li:contains('" & $aResult[$i][4] & "')""))});" & _
"$('#selected-items').sortable({update:function(event, ui){}});"

ConsoleWrite($sJavaScript & @CRLF)

...

_WD_ExecuteScript($sSession, '$sJavaScript')

Code Copied from Console Output and used in DevTools Console to manually trigger the change which works correctly.

$moveItem = $("#selected-items li:contains('Hot Topics - Drones in Agriculture')");$('#selected-items').sortable('option','update')(null, {item: $($moveItem).after($("#selected-items li:contains('Hot Topics: Drones in Agriculture - UPDATE')"))});$('#selected-items').sortable({update:function(event, ui){}});

I do still receive an error message in DevTools console: VM6905:1 Uncaught TypeError: $(...).sortable(...) is not a function
at <anonymous>:1:132

Any input would be appreciated and thank you for your time,

Thomas

ThomasBennett · September 30, 2022

18 minutes ago, Danp2 said:

This works AFAICS --

$sMovejQuery = """li:contains('New Lesson')"""
    $sDestjQuery = """li:contains('Original Lesson')"""
    $sArguments = $sDestjQuery & ", " & $sMovejQuery
    $sJavascript = '$("#selected-items").sortable("option","update")(null,{item: $(arguments[0]).after($(arguments[1]))});'

    _WD_ExecuteScript($sSession, $sJavaScript, $sArguments)

This executes the change needed perfectly. However just as you said earlier; I don't think jQuery is updating when I save the update to the system; the lesson is still at the bottom of the list (original location). Okay, now on to figuring out how to refresh / update jQuery. 🤓

Dragging and dropping web elements

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content