Unable to fill a checkout form using Webpage scripts

Support
1

I am trying to fill in a user form (Shipping address page) and for some reason I cannot use the setValue script to fill the form. Test below has the script which I ran, but it does not work.

Suggest any alternate scripts that can help fill up the form…

http://www.webpagetest.org/result/160210_VX_YY7/

2

I did try other methods using

document.getElementbyId(‘’).value=‘’ and also methods like waitforjsdone but nothing works. How do I know what is erroring out?

Is there a way to look at log output which shows what is failing?

3

Did you make it a private test? I’m unable to see the script, which makes it hard to debug.

The general pattern for this type of test would be something like this:

logData 0 navigate setup-page.html setValue id=foo bar logData 1 navigate test-page.html

Of course, “foo” must be the ID attribute of the input element whose value should be set to “bar”. Repeat for each form field.

If you want to try the JS approach with getElementById, make sure you’re using it with the exec[AndWait] command and not just writing pure JS in the script block.

4

This is my script…

//Script that works on Production environments. For other environments tweak the DOM elements.
logdata 1
logErrors 1

//Homepage
navigate http://www.lowes.com

//Localize to store
setValue id=nav-search-input 28117
clickAndWait id=nav-button-store-search

//Category page
navigate http://www.lowes.com/Kitchen/_/N-1z0z3a8/pc

//PL page
navigate http://www.lowes.com/Kitchen-Cabinets/In-Stock-Cabinets/Unfinished/_/N-1z0z390Z1z10e4w/pl?cm_sp=Kitchen-_-Kitchen%20Cabinets|PopularCat-_-Other|Kitchen_Cabinets_Unfinished&cm_cr=Kitchen+Cabinets-_-Web+Activity-_-Kitchen+Cabinets+TF+Revamp-_-SC_Kitchen+Cabinets_TopFlexible_Area-_-10728559_8_Unfinished&cm_cr=null_1_Unfinished+Cabinets#!

//PD page
navigate http://www.lowes.com/pd_336272-66150-33+B36B_1z0z390Z1z10e4w__?productId=50134938&pl=1

//Select shipping type
clickAndWait id=LD

//Add to cart from PD page
clickAndWait class=button add

//Checkout from Add to cart modal (View cart page)
clickAndWait class=ui-button-text

//Start secure checkout from view cart
//clickAndWait class=btn-shop secure more start-checkout
clickAndWait data-action=login

//Guest checkout
clickAndWait class=btn-shop secure more start-checkout

//Enter shipping information
execAndWait document.getElementsByClassName(‘ui-input required firstName’).value=“test”

But using this I was not able to complete the form.

5

That’s a really hairy script.

Why do you need four navigations? Does each navigation set some state for the subsequent page? If so, could you replicate the state by setting cookies instead? If not, remove the navigations.

What exactly are you trying to measure? Even though the script isn’t working, the intention seems to be to record all network activity from home page through the checkout page, with all user interactions in between. WebPageTest can probably do this if you really wanted, but I doubt that’s your intention. You are probably looking for results that show you the performance of the final checkout step and/or possibly each intermediate step along the way. In either case, you really need to refactor this script to focus on one thing at a time. Having a few smaller scripts that perform discrete tests is much easier to manage not to mention analyze. It also makes debugging a lot easier as opposed to a monolithic script.

Finally, you have some syntax errors/mistakes.

  • logData is enabled by default, so setting it to 1 is a no-op. Do you mean to disable it and then re-enable later?
  • try to limit your script to one clickAndWait. In my experience, this command is the last thing before re-enabling logData so you can measure the effect of clicking.
  • you should really only need a single navigate command. If you think you need more, break apart your test into multiple smaller tests.
  • clickAndWait class=button add Is “add” another class on the button? The script is whitespace delimited, so it’s probably ignored if not erroring out. clickAndWait takes one argument, key=value pair. This happens again with the start-checkout button.
  • execAndWait can take any arbitrary JS code. If you’re having difficulty with the WPT commands, convert them into JS code and just execAndWait a long chain of ; delimeted JS statements. For example:
execAndWait foo(); bar(); baz();
6

Thanks for the reply.

I know I have to clean up the scripts :slight_smile: Reason I am using 4 different navigation and click and wait is that each page in shopping cart flow sets various session elements and cookies which is tough to mock up with set cookie. In other words there are too many cookies to set. My intent is to measure the performance of last page in checkout (Review and Pay page), but I am unable to fill the form so stuck in shipping page. I added a ; to javascript and fixed the button add class name but still unable to fill the form.

I can see that the WPT script goes all the way to shipping page so script is fine. Only line that does not work is the line below where I am trying to fill in the form elements. If i am able to fill up the form I can proceed to the next page in the flow.

Any reasons you can think of which prevents me from filling the form, like javascript errors, secure page?

execAndWait document.getElementsByClassName(‘ui-input required firstName’).value=“test”;

7

According to the below code if my class name contains space and more than two words then how should I pass it.

clickAndWait class=button add

8

Unable to fill a checkout form using Webpage scripts

please !