Hacking the browser with puppeteer sharp .NET conf AR 2018

Hacking the Browser
With Puppeteer-Sharp
Darío Kondratiuk
.NET Senior Developer - MultiTracks.com
Author of Puppeteer-Sharp
@kblok - @hardkoded
www.hardkoded.com

Hacking the Browser
With Puppeteer-Sharp
Darío Kondratiuk
.NET Senior Developer @ MultiTracks.com
Author of Puppeteer-Sharp
@hardkoded - @kblok
www.hardkoded.com
https://developer.mozilla.org/en-US/docs/Web/WebDriver October 4th, 5th & 6th 2018.NET Conf AR v2018

Headless Browsers

Headless Browsers
● July 4, 2017 => Google Chrome 59
○ chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/

Headless Browsers
● July 4, 2017 => Google Chrome 59
○ chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
● August 8, 2017 => Firefox 55
● August 16, 2017 => Puppeteer v0.9
● January 12, 2018 => Puppeteer v1.0
● March 1, 2018 => Puppeteer Sharp v0.1
● April 27, 2018 => Edge DevTools Protocol v0.1

WebDriver vs Headless Browsers

WebDriver
WebDriver is a remote control interface that enables
introspection and control of user agents. It provides a
platform- and language-neutral wire protocol as a way for out-
of-process programs to remotely instruct the behavior of web
browsers.

https://developer.mozilla.org/en-US/docs/Web/WebDriver

Use Cases

Screenshots

[HttpGet("{owner}/{repo}")]
public async Task<FileContentResult> Get(string owner, string repo)
{
var contributorsPage = $"https://github.com/{owner}/{repo}/graphs/contributors";
using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = false
}))
using (var page = await browser.NewPageAsync())
{
await page.GoToAsync(contributorsPage);
await page.WaitForSelectorAsync(".contrib-person");
var element = await page.QuerySelectorAsync("#contributors");
var image = await element.ScreenshotDataAsync();
return File(image, "image/png");
}
}

PDFs

[HttpGet("{owner}/{post}")]
public async Task<FileContentResult> Get(string author, string post)
{
var contributorsPage = $"https://medium.com/{author}/{post}";
using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true
}))
{
await page.GoToAsync(contributorsPage);
await page.WaitForSelectorAsync("HEADER");
await page.EvaluateExpressionAsync("document.querySelector('HEADER').remove();");
var pdf = await page.PdfDataAsync();
return File(pdf, "application/pdf");
}
}

Web Scraping

UI Testing

[Fact]
public async Task ShouldHonorThePrice()
{
//Previous Code
var clickElement = await page.EvaluateExpressionHandleAsync(@"
document.querySelectorAll('.main-content buy-button:first-child A')[0]")
as ElementHandle;
await clickElement.ClickAsync();
await page.WaitForSelectorAsync(".price-container .amount");
var checkoutPrice = await page.EvaluateExpressionAsync<string>(@"
document.querySelectorAll('.price-container .amount')[0].innerText
");
Assert.Equal(bestPrice, checkoutPrice);
}

Task Automation

DEMO

More examples
https://github.com/GoogleChromeLabs/puppeteer-examples

Even more examples
https://github.com/checkly/puppeteer-examples

Don’ts
● DDoS Attacks
● Unethical Web Scraping
● Fake page loads
● Credential Stuffing

Puppeteer the world!
● Puppeteer Recorder
● Rendertron
● Checkly
● Contributors!

Give Back

The power of a Star

Thank you!
@hardkoded - @kblok
www.hardkoded.com

Hacking the browser with puppeteer sharp .NET conf AR 2018

More Related Content

What's hot (20)

Similar to Hacking the browser with puppeteer sharp .NET conf AR 2018 (20)

More from Darío Kondratiuk (6)

Recently uploaded (20)

Hacking the browser with puppeteer sharp .NET conf AR 2018

Editor's Notes