Scraping CSS elements, matching to local file names, uploading matching file to the website

[Riley]

I've been looking for a solution to a tedious task and am hoping Macro Express Pro can do it.  Could you tell me if the following automation is feasible in Macro Express Pro.  If so, are there any special tricks or tips you might have for someone new to the program?  I understand the basics of CSS, HTML, etc., and work with VBA a bit as well.

 

Here's what I need the macro to do:

1. Let me manually navigate to the webpage I want it to work on, then let me trigger the automation. 
2. Read a text element from the webpage. That text element cannot be highlighted or selected with the mouse and I've had some trouble tracking down a unique class for it.  It always appears in the same location on the screen, so I should be able to find some way to locate a class or css element to scrape it...
3. Match that text element to a file in a specific folder.  Folder could be opened manually before starting the macro and match could be done with a simple search in file explorer, leaving only the desired file in the results list.
4. Upload that file to the webpage.  The webpage supports drag and drop to upload the file.  Also has a dropdown menu that includes an attach file. 
5. Match that same text element from the webpage to a local Excel file, read a specific cell from that file, and then input that data in a textbox on the active webpage.
6. Navigate through multiple webpages using the next button, repeating steps 2-3 each time. (about 100 iterations per run)
7. Stop when there is no active next button on the screen.

 

What do you think?  Feasible?

[acantor]

41 minutes ago, Riley said:

Read a text element from the webpage. That text element cannot be highlighted or selected with the mouse and I've had some trouble tracking down a unique class for it.  It always appears in the same location on the screen, so I should be able to find some way to locate a class or css element to scrape it...

 

This might be the key step.

 

More details on reading text elements. Are you accessing the rendered page, the source code, or something else?

[Riley]

25 minutes ago, acantor said:

 

This might be the key step.

 

More details on reading text elements. Are you accessing the rendered page, the source code, or something else?

 

The browser accesses the rendered page.  In the rendered page, the text I need is not clickable, nor can it be highlighted or copied with mouse or keyboard.

 

I'm used to dealing this kind of thing with the inspect function but different automation tools seem to want different elements from it.  Here's some samples of different ways the inspect tool lets me identify the item:

 

Element:
<bdi class="makeStylesbaseText-0-2-89">TEXT I NEED</bdi>

 

Xpath:
//*[@id="main-content"]/div[7]/div/div/div/div/div[1]/div[1]/section/div[1]/div[2]/ul/li[2]/span/span/bb-username/bb-ui-username/div/div/bdi

 

Full xpath
/html/body/div[1]/div[2]/bb-base-layout/div/main/div[7]/div/div/div/div/div[1]/div[1]/section/div[1]/div[2]/ul/li[2]/span/span/bb-username/bb-ui-username/div/div/bdi

 

JS path:
document.querySelector("#main-content > div.bb-offcanvas-panel.bb-offcanvas-right.full.hide-in-background.panel-has-focus.active.cc_1255436_1 > div > div > div > div > div.test-grading.uit-submission-grading-wrapper > div.panel-wrap.has-bb-panel-header > section > div.panel-content-slide-toggle.slide-toogle-container > div.panel-content-center-trigger > ul > li.no-select.carousel-slide.current-slide.visible-slide > span > span > bb-username > bb-ui-username > div > div > bdi")

 

Selector:
#main-content > div.bb-offcanvas-panel.bb-offcanvas-right.full.hide-in-background.panel-has-focus.active.cc_1255436_1 > div > div > div > div > div.test-grading.uit-submission-grading-wrapper > div.panel-wrap.has-bb-panel-header > section > div.panel-content-slide-toggle.slide-toogle-container > div.panel-content-center-trigger > ul > li.no-select.carousel-slide.current-slide.visible-slide > span > span > bb-username > bb-ui-username > div > div > bdi
 

 

[acantor]

Can the entire page be selected by pressing Ctrl + A?

 

If yes, then you can probably copy the text, assign it to a variable, and then parse it.

 

Even if select and copy captures the page, it may not help. The information you want to extract is not available via the rendered page. But is it available via the source code? If yes, a macro might look something like this:

 

Ctrl + u   // Open source code for current web page

Short delay

Ctrl + a  // Select all

Possible short delay

Clipboard Copy

Set String Variable %Clip% to whatever is in the clipboard

Possible short delay

Ctrl + F4   // Close the source code page

 

Then parse %Clip%.

 

If this doesn't work, you might need to add a page inspector into the mix.

[Riley]

CTRL+a and copy gets me most of the webpage, but not the part I want. It skips over that part of the page in the select-all.

 

CTRL+u gets me source code, but the text I need isn't in that source code.

 

BUT, that did give me an idea.  If I right-click on the element I need and select "inspect" from the dropdown menu, it automatically selects the section I need from the code.

Then CTRL+c gets me this on the clipboard: <bdi class="makeStylesbaseText-0-2-89">TEXT I NEED</bdi>

Which I could easily parse in Excel if there isn't a way to do it directly in Macro Express Pro.

 

So, I think my workflow will end up being:

 

Manually navigate to the webpage I want it to work on, then trigger the macro. 

 

Macro:

1. Move mouse to x,y position over the text I need.
2. Right click.
3. Select "inspect" from dropdown menu.
4. CTRL+c
5. F12 (close inspect window).
6. [Paste into Excel to parse and get parsed value or parse it in Macro Express Pro if there is a way] 
7. Paste the parsed text into a search in a file explorer window, leaving only the desired file in the results list.
8. Drag and drop the file to the browser upload window.
9. Wait.
10. Click confirm upload button on popup.  
11. Paste the parsed text into a simple search in a different file explorer, leaving only the desired Excel file in the results list.
12. Open that Excel file.
13. Pull the value from Excel cell X, Y.
14. Click on the input box on the website; paste the value from the Excel file.
15. Click submit.
16. Check if there is a next button on screen. If no, exit macro.
17. If yes, Click next.
18. Wait
19. Repeat (about 100 times per run)

So, my remaining questions:

- Can Macro Express Pro do a pixel check or similar kind of check to be sure I have a next button on the screen before repeating? (it disappears when on the last screen)

- The Excel files I need to pull data from will not always appear in the same location on the desktop.  Can Macro Express Pro change the focus to that file and select a cell without knowing the x,y coordinates on the screen?  Some of those files it won't even be visible on screen without scrolling down or resizing the window, so I don't think even resizing the Excel file on screen would solve this, but it is always in the same cell (E:27).

 

Thanks for talking this through with me.  It's been super helpful.

[acantor]

10 hours ago, Riley said:

• Move mouse to x,y position over the text I need.
• Right click.
• Select "inspect" from dropdown menu

 

Perhaps all you need to do is hover the mouse pointer over the text. Then trigger the macro by hotkey to perform the right click and to select "Inspect." You can do a right mouse click via MEP, but pressing Shift + F10 might also work.

 

In Firefox, "Q" selects Inspect from the context menu.

 

10 hours ago, Riley said:

[Paste into Excel to parse and get parsed value or parse it in Macro Express Pro if there is a way] 

 

Macro Express doesn't have RegEx, but with a little effort, Macro Express can easily parse string variables.

 

10 hours ago, Riley said:

Drag and drop the file to the browser upload window.

 

In File Explorer, there is almost always a way to accomplish the same thing as drag-and-drop using only the keyboard. This step will be much more reliable if you can figure out the sequence of keys to do this.

 

10 hours ago, Riley said:

Can Macro Express Pro do a pixel check or similar kind of check to be sure I have a next button on the screen before repeating?

 

Yes. You can monitor changes in pixel colours or in the shape of the mouse pointer.

 

Overall, your project sounds challenging -- yet do-able -- with Macro Express.

[Cartwheels]

 

On 6/16/2024 at 7:20 PM, acantor said:

[Paste into Excel to parse and get parsed value or parse it in Macro Express Pro if there is a way] 

You may have figured this part out by now, but if not:

 

<COMMENT Value="Parse Webpage"/>
<TEXT TYPE Action="0" Text="<CTRLD>a<CTRLU>"/>
<CLIPBOARD COPY/>
<VARIABLE SET STRING Option="\x02" Destination="%WebText%" NoEmbeddedVars="FALSE"/>
<IF VARIABLE Variable="%WebText%" Condition="\x06" Value="X Replace text here" IgnoreCase="TRUE"/>
<MESSAGEBOX Caption="Test" Message="Yes" Icon="0"/>
<ELSE/>
<MESSAGEBOX Caption="Test" Message="No" Icon="0"/>
<END IF/>

 

 

I've recently figured out that after using  CTRL A to select all, you can use  <CTRLD><SHIFTD><HOME><SHIFTU><CTRLU> to unselect all.

Which for me looks like this:

 

<COMMENT Value="Unselect in Browser"/>
<COMMENT Value="CTRL A selects all, this unselects all."/>
<KEYSTROKE SPEED Delay="10"/>
<TEXT TYPE Action="0" Text="<CTRLD><SHIFTD><HOME><SHIFTU><CTRLU>"/>
<KEYSTROKE SPEED Delay="0"/>

 

[acantor]

There may be simpler ways to deselect that are less likely to have unintended side effects. Try one of these:

 

<ARROW RIGHT>    or

<ARROW LEFT>      or

<HOME>                  or

<END>

 

In many applications, Ctrl+Shift+Home selects text, not de-selects text. In general, the selection starts at the insertion point, and continues to the start of the document. So it might be better to substitute a key press (or key combination) that reduces potential for mischief caused by performing large actions, such as selecting to the top of the document.

[Cartwheels]

You are right, the deselect method I mentioned may not work in other applications. It does work in browsers like Chrome. I've tried many ways and would like to find a simpler way. So far this is the only one that I have found to work. None of the ones you mention work in  my Chrome style browser. Here is a test of this page.

<WINDOW ACTIVATE Title="Scraping CSS elements, matching to local file names" Exact_Match="FALSE" Wildcards="FALSE"/>
<DELAY Flags="\x01" Time=".5"/>
<TEXT TYPE Action="0" Text="<CTRLD>a<CTRLU>"/>
<DELAY Flags="\x01" Time=".5"/>
<TEXT TYPE Action="0" Text="<ARROW RIGHT>"/>
<TEXT TYPE Action="0" Text="<ARROW LEFT>"/>
<TEXT TYPE Action="0" Text="<HOME>"/>
<TEXT TYPE Action="0" Text="<END>"/>
<TEXT BOX DISPLAY Title="test" Content="{\\rtf1\\ansi\\ansicpg1252\\deff0\\deflang1033{\\fonttbl{\\f0\\fnil Tahoma;}}\r\n\\viewkind4\\uc1\\pard\\f0\\fs20 Ctrl+Shift+Home\\fs10 \r\n\\par }\r\n" Left="Center" Top="Center" Width="278" Height="200" Monitor="0" OnTop="TRUE" Keep_Focus="TRUE" Mode="\x01" Delay="2"/>
<DELAY Flags="\x01" Time="2"/>
<KEYSTROKE SPEED Delay="10"/>
<TEXT TYPE Action="0" Text="<CTRLD><SHIFTD><HOME><SHIFTU><CTRLU>"/>
<KEYSTROKE SPEED Delay="0"/>

 

[acantor]

Your method does seem to work. I wouldn't have guessed it!

 

The following method to deselect a web page might be simpler; or maybe it's more complex! I'm not sure the method is more reliable, would have fewer side effects, etc. Temporarily switching to caret browsing introduces some interesting macro scripting possibilities.

 

<F7>                       // Toggle ON Caret browsing

<ARROW RIGHT>  // De-select

<F7>                       // Toggle OFF Caret browsing