WebDriver - Login to a site

[argumentum]

I'd like to login to a site. ( https://www.werwer.org/testing/LoginForm/ ).

1. How do I list the IDs or XPaths from HTML source.
2. How do I submit to execute the login.

Thanks

[SOLVE-SMART]

Hi @argumentum 👋 ,

your page do not have any @ids in the DOM available (at least for the /LoginForm/ page. So you have to search for indicators which will give you the correct elements to interact with. In this example page you could use the placeholder attribute for username and password and the name "Login" for the submit button as your selectors.

In other words, you can use XPath for the three elements to interact (2x input, 1x button) like this:

_Login()

Func _Login()
    Local Const $sUsername = 'argumentum'
    Local Const $sPassword = 'your-password'

    Local Const $sUsernameSelector     = '//form//input[@placeholder="Enter Username"]' ; or by name: [@name="uname"]
    Local Const $sPasswordSelector     = '//form//input[@placeholder="Enter Password"]' ; or by name: [@name="psw"]
    Local Const $sSubmitButtonSelector = '//form//button[text()="Login"]'

    _WD_ElementAction($sSession, _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, $sUsernameSelector), 'value', $sUsername)
    _WD_ElementAction($sSession, _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, $sPasswordSelector), 'value', $sPassword)
    _WD_ElementAction($sSession, _WD_FindElement($sSession, $_WD_LOCATOR_ByXPath, $sSubmitButtonSelector), 'click')
EndFunc

I didn't tested it right now, but I am relatively sure, this should work 😇 .

How did I came up with the XPath? Okay, I am experienced with locator strategies, but in case you're not:
Use Chrome (or Firefox) > right click on your target element > choose "inspect" > you are now in the DevTools ("Elements" tab) > right click on the highlighted DOM element (input or button) > choose Copy from the context menu > Copy XPath > Ctrl+F > paste your generated XPath in the search (optional) > this verifies the match > use this selector in the _WD_FindElement() function.

But: This is often not very robust. It's usually better to improve the selector by the usage of a relative XPath (different XPath Axes).

I hope this will answer your questions 🤞 .

Best regards
Sven

Edited May 20, 2024 by SOLVE-SMART

[SOLVE-SMART]

These wrapper functions, of my boilerplate repository (regarding the au3WebDriver) could be helpful for further tasks you may have 😀 .

Best regards
Sven

[argumentum]

3 hours ago, SOLVE-SMART said:

your page do not have any @ids in the DOM available

I added IDs to each <input> so it can be done with ID too.

[SOLVE-SMART]

5 hours ago, argumentum said:

I added IDs to each <input> so it can be done with ID too.

Even better 👌 , then you only need to search for this unique attribute //input[@id="idUName"], in case of the username. But I guess you already get it 😇 .
Best regards
Sven