Driving a website using VBA and Selenium - html

Question

I have to log into SnapSurveys and download 20+ files monthly. Already a tedious process, I now have to do it weekly instead and it will be beyond tedious to do it by hand, so I want to automate it and have installed Selenium to do so. I've tracked the entire process using the SeleniumIDE (in FireFox), so I know what I want to do, and the basics of how to do it, however, I've run into an absolute brick wall trying to understand the web page structure to make it happen.
Using the Dev tools in both Chrome & FireFox, I've identified the "User Name" field as this:
<p>
<label for="UserName">Username</label>
<input data-val="true" data-val-required="The Username field is required." id="UserName" name="UserName" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</p>
I'm using the following code to attempt to locate the "Username" text box so I can type data into it. I've tried each of the values of Text, in turn, with each of the Driver.FindElementBy... possibilities, and they all give me this error:
Run-time Error '7':
NoSuchElementError
Element not found for <By type> = <text>
This is the code:
Private Sub Login()
Const SITE_BASE_NAME As String = "https://www.snapsurveys.com/login"
Dim Driver As IEDriver
Set Driver = New IEDriver
Dim IsSiteLoaded As Boolean
IsSiteLoaded = Driver.Get(SITE_BASE_NAME)
If IsSiteLoaded Then
Dim Text As String
Text = "columns six"
Text = "UserName"
Text = "main"
Text = "//*[#id=""UserName""]"
Dim El As WebElement
Set El = Driver.FindElementByClass(Text)
Set El = Driver.FindElementByCss(Text)
Set El = Driver.FindElementById(Text)
Set El = Driver.FindElementByLinkText(Text)
Set El = Driver.FindElementByName(Text)
Set El = Driver.FindElementByPartialLinkText(Text)
Set El = Driver.FindElementByTag(Text)
Set El = Driver.FindElementByXPath(Text)
End If
Driver.Quit
End Sub
The one combination I've found that's not given me an error is:
Text = "main"
Set El = Driver.FindElementById(Text)
But that only gives me the breadcrumbs at the top of the screen, and I'm not really sure how to get anywhere useful from there.
Obviously, I don't understand enough about web design to have any clue what I'm supposed to be looking for, but I thought I could trial and error my way through it with a little less frustration than this.
What element(s) do I need to be looking for in the page source, and which FindElementBy function do I need to use to search for it in code?
Further, is filling in the UserName & Password fields, clicking "Log In", then clicking on the appropriate links on the next page, etc. the best way to go about this? I think that once I've logged myself in, I should be able to get a collection of links for each file I need and directly download each link, but I'm not 100% certain if I can do that or not.
Some notes:
Yes, I realize that the code is using IE as the browser. The drivers I have for FF & Chrome seem to be out of date (browser opens, but it won't load the web page) and I haven't gotten newer ones. At the moment, I don't care what browser I use so long as I get it working.
Yes, I realize that I'm closing the browser down at the end of the Sub. Again, I'm just testing, trying to find my way in the dark.

Answer 1

The login functionality is inside an iframe. You have to switch selenium's focus to that iframe and then try again and it should work.
You can try this:
Driver.switchtoframe (0)
Driver.FindElementById("UserName")
Some knowledge about web design can help a long way when dealing with selenium to automate, but with just some basic knowledge you can get the work done easily.
What element you should be looking for depends on what you are trying to achieve. If you want to enter something in a text field, you should be looking for <input type="text"> elements, for table's you need to be looking for <table> elements.
I usually prefer using find elements by xpath, but if the element has a unique id or class on the webpage, you can use find element by class name or find element by id.
You seem to be going on the right track to automate your task.