Quick intro guide: Taming Amazon.com

After seeing @nutan’s post involving ‘hamburger menus’ I tried to activate the hamburger menu on the (U.S.) main page of Amazon.com. I thought it would be easy, but I was dead wrong.

Clicking on the hamburger menu with WebAutomation.Click wouldn’t activate it. Neither would the following JS script, which worked fine from the console, but not from WebAutomation.ExecuteJavascript:

console

This drove me bananas. I tried (as a user, not automating anything) to activate the hamburger menu with Tab->Tab->Enter. No luck - after I performed those steps, though, I discovered that hovering over the control with the mouse cursor activated the hamburger menu, without clicking. I then tried various combinations of hovering and clicking with WebAutomation, but without luck.

I then decided to try an approach that is not robust, and does not take into account differences in DPI scaling or screen resolution, and won’t survive a change by Amazon in the order of links in the hamburger menu. It is just point-and-click.

To do this, I needed screen coordinates of the hamburger menu. I wasn’t able to get these easily using Robin, so I just used AutoHotkey’s WindowSpy to get the screen coordinates:

(Here, X = 30 and Y = 159 will definitely work, but I chose X = 15 and Y = 150, see the code.)

I created an appmask with just the main Amazon screen;
mainscreen
the BurgerMenu control;
burgermenu
with the selector set as follows;
selector
after trying lots of different combinations.

The code looks like this:

Once I’ve got the hamburger menu activated, everything from there on is basically moving the mouse cursor and then clicking:

  1. Activate hamburger menu
  2. Move mouse to ‘Clothing’ and click, with delay
  3. Move the mouse to ‘Men’ and click.

(As I note in the code, you can easily modify the code to sign in instead of shopping. Instead of moving the mouse after hovering, and then clicking, don’t move the mouse - just click. That will trigger the sign-in dialog. You’ll need a delay.)

I know the screenshot above is hard to read, so here’s the code for copying if desired:

# The appmask contains the main screen and a control for 'the hamburger menu.'
# As my attempts to activate it with WebAutomation.Click failed (the control just turns yellow),
# and as JS attempts with "document.GetElementById('nav-hamburger-menu');" failed, although
# this method works fine from the Chrome developer console,
# I have tried to duplicate user interaction with the browser instead.
# N.B.: My DPI scaling is set at 125% on Windows 7 for this automation.
import                                  "C:\Users\admin\Documents\Robin\wimpy.appmask"


# Launch Chrome and navigate to Amazon
WebAutomation.LaunchChrome              Url:  "https://www.amazon.com" \
                                        WindowState:WebAutomation.BrowserWindowState.Maximized \
                                        ClearCache:false \
                                        ClearCookies:False \
                                        BrowserInstance=> Browser

# I don't want to interfere with the automation by accident, so I block input
MouseAndKeyboard.BlockInput             BlockIt: true

# This delay may actually be excessive; I use it out of caution
wait 2

# This step appears to be necessary. I might be able to focus or hover as well.
# I will try both of those at a later date. At any rate, this sets the 
# hamburger menu to a state where hovering will activate it.
WebAutomation.Click                     BrowserInstance:  Browser \
                                        Control: wimpy.AmazonMain.BurgerMenu

# I used a WindowSpy tool from AutoHotkey to determine the 
# window position of controls for the rest of the automation.
# This moves the mouse to the hamburger menu, which is now ready to accept input.
MouseAndKeyboard.MoveMouse              X: 15 Y: 150 \
                                        RelativeTo:MouseAndKeyboard.MousePositionRelativeTo.Screen \
                                        MovementStyle:MouseAndKeyboard.MouseMovementStyle.Instant

# Here's a delay to allow the menu to slide out.
wait 1

############# NOTE ###########################################################################
# If you want to sign in here, you can leave the mouse coordinates as as                     #
# and click. I've tried it, and it works just fine. You'll probably need                     #
# to experiment with some delays.                                                            #
# I won't be doing that here - I'll just go shopping from the hamburger menu.                #
##############################################################################################

# In the next two steps, I move to the 'Clothing' item of the hamburger menu's dropdown
MouseAndKeyboard.MoveMouse              X: 190 Y: 665 \
                                        RelativeTo:MouseAndKeyboard.MousePositionRelativeTo.Screen \
                                        MovementStyle:MouseAndKeyboard.MouseMovementStyle.Instant

MouseAndKeyboard.Click                  ClickType:MouseAndKeyboard.MouseClickType.LeftClick \
                                        MillisecondsDelay:300

# A delay for page loading
wait 0.5

# Now I move to the 'Men' item, and click.
MouseAndKeyboard.MoveMouse              X: 190 Y: 450 \
                                        RelativeTo:MouseAndKeyboard.MousePositionRelativeTo.Screen \
                                        MovementStyle:MouseAndKeyboard.MouseMovementStyle.Instant

MouseAndKeyboard.Click                  ClickType:MouseAndKeyboard.MouseClickType.LeftClick \
                                        MillisecondsDelay:300

# This delay is merely to demonstrate that the automation works.
wait 5

# Automation ends
WebAutomation.CloseWebBrowser           BrowserInstance: Browser

EDIT/UPDATE: Thanks to @jokoum’s post on iFrame use, I came up with this. The selector for the control seems like black magic to me, and I am utterly in awe, all hail @jokoum, but this works to activate the @*#**! hamburger menu. :grinning: What? No appmask? :innocent:

# This works without an appmask.
# Thanks, @jokoum!!!!!!!!!!
WebAutomation.LaunchChrome              Url:  "https://www.amazon.com" \
                                        WindowState:WebAutomation.BrowserWindowState.Maximized \
                                        ClearCache:false \
                                        ClearCookies:False \
                                        BrowserInstance=> Browser

WebAutomation.Click                     BrowserInstance:  Browser \
                                        Control: 'domcontainer{<{<{<SelectorSeparator>}>}>}uia3:// #nav-hamburger-menu' 

wait 1

MouseAndKeyboard.MoveMouse              X: 30 Y: 155 \
                                        RelativeTo:MouseAndKeyboard.MousePositionRelativeTo.Screen \
                                        MovementStyle:MouseAndKeyboard.MouseMovementStyle.Instant

wait 5

WebAutomation.CloseWebBrowser           BrowserInstance: Browser

# Thanks a million to @jokoum for 'domcontainer{<{<{<SelectorSeparator>}>}>}uia3:// #myFrame'\ 
# from another post
# which I have shamelessly pilfered.

Regards,
burque505

3 Likes

Excellent guide @burque505!
Thank you very much!

Best regards,
J.

2 Likes

Thanks, @jpap! I appreciate it.
Regards,
burque505

1 Like