Features and Changes

[brandon-bethke-timu]

Hopefully these changes are not considered offensive. The new features should be considered beta and may be modified in the future.

• The keycode that emits the type() instruction is now configurable on the options page. It defaults to 9 (tab)

• Pressing enter will emit a page.keyboard.press("Enter") instruction. Maybe this should be configurable.

• New option to cause waitForSelector to also use {visible: true/false}.

• New cookies option. A json value that defines the cookies to add to the page

[
   {
      "name":"accessToken",
      "value":"",
      "domain":".fake.com",
      "path":"/"
   },
   {
      "name":"namespace",
      "value":"alpha",
      "domain":".fake.com",
      "path":"/"
   }
]

• New local storage option. A json value that defines the local storage to add to the page.

{
    "localstorageoption1": "1",
    "localstorageoption2": "0"
}

• Added an addition toolbar under the recording toolbar. Needs work.

• The new toolbar contains new option 'Wait'. Clicking the 'Wait' button emits a page.waitFor(timeout) instruction. The timeout value is configurable in the options and defaults to 2000 (two seconds).

• The new toolbar contains new option 'Text Click'. This name is bad. Clicking this button and then clicking on an element will emit a waitForXPath instruction followed by a click instruction. Additionally it causes the waitForXPath method to force a match based on the normalized innerText of the element. This is useful when the element being clicked on is not always at the same css path.

• The new toolbar contains new option 'Wait For'. Clicking this button and then clicking on an element will emit a waitForXPath instruction. Additionally it causes the waitForXPath method to force a match based on the normalized innerText of the element. This is useful when the element being clicked on is not always at the same css path.

Sanitized sample script using new code generation.

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.setCookie({"name":"accessToken","value":"","domain":".fake.com","path":"/"})
await page.setCookie({"name":"namespace","value":"alpha","domain":".fake.com","path":"/"})

await page.setViewport({ width: 1932, height: 604 })

await page.goto('https://www.fake.com')

await page.evaluate(() => {
  localStorage.setItem("localstorageoption1", "1")
  localStorage.setItem("localstorageoption2", "0")
})

var item = await page.waitForXPath('//EXPANDED-SIDE-BAR-HEADER-ITEM-TEXT[normalize-space() = "Mailboxes"]', {visible: true})

var item = await page.waitForSelector('nav-side-bar-option:nth-child(3)', {visible: true})
await item.asElement().click('nav-side-bar-option:nth-child(3)')

var item = await page.waitForSelector('.search-box', {visible: true})
await item.asElement().type('Smoke')

await page.keyboard.press('Enter');

var item = await page.waitForXPath('//SEARCH-RESULT-TITLE[normalize-space() = "Smoke Test"]', {visible: true})
await item.asElement().click()

page.waitFor(2000)
await browser.close()

[tnolet]

@brandon-bethke-neudesic thanks for working on Puppeteer Recorder. I went through your PR and I love some of the ideas! However, I cannot merge this PR. There are too many different features, updates etc. going on in one PR. Also, some of the changes are beta or very specific to your use case that are probably better left to individual users to add themselves to the code once generated, i.e. the waitForX selectors with timeouts, the custom elements.

This was not very clear for contributors, my bad, so I just added a CONTRIBUTING.md file to the master branch which lays out some rules regarding contributing PR's.

Having said that, the following features fit with the overall project and should appeal to more users:

• adding the visible boolean to waitFor
• some form of local storage manipulation

Would love to chat about this and discuss implementation in a related issue.