The Magic of Headless Browser + Puppeteer: Using DevTools Without opening DevTools & GitKraken as a legendary Git GUI Client 1. The power of "Headless Browser". Your invincible genie. 2. Extending the power of headless even more - amazing things we can do with "Puppeteer". 3. "GitKraken" - an intuitive Git GUI client that 1.7 Million+ Devs Rely on.

1. 1
The Magic of Headless Browser + Puppeteer:
Using DevTools Without opening DevTools
&
GitKraken as a legendary Git GUI Client

2. hello!
We are the interns..
2

3. 3
The Magic of Headless Browser
+
Puppeteer:
Using DevTools Without opening
DevTools

4. 4
What is
Headless browser?
➔ running a script or test against a browser
but without the browser, UI starting up.
➔ controlled programmatically
➔ executed via a command-line interface or
using network communication.

5. 5
Use Cases of headless browser
➔ Test automation in modern web applications.
➔ Taking screenshots of web pages.
➔ Running automated tests for JavaScript libraries.
➔ Scraping websites for data.
➔ Automating interaction of web pages.

6. 6
Examples of Headless Browsers
PhantomJS
Chrome
Firefox
CasperJS

7. 7
Headless chrome
(chrome without chrome)
A way to run chrome browser in a headless environment

8. 8
Headless chrome
(chrome without chrome)
➔ Brings all the web platform features
provide by chromium and blink in
rendering engine to command line.
➔ Available in chrome59 version.

9. Headless Chrome and it’s popularity
➔ support for major desktop, server, and mobile operating systems.
➔ has convenient development tools.
➔ any additional useful features for Devs.
➔ Puppeteer.
9

10. 10
two ways to use Headless Chromium:
➔ via the DevTools remote debugging protocol
<using command line>
➔ from Node.js
<using noje libraries>

11. 11
<Command line features>

12. 12
programmatically(Node) <using puppeteer>
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Navigates to the project README file
await page.goto('https://github.com/GoogleChrome/puppeteer/blob/master/README.md');
// Generates a PDF from the page content
await page.pdf({ path: 'overview.pdf' });
await browser.close();
})();

13. Why Testing Is A scary thing for the developers?
➔ Test is slow and complicated.
➔ Maintaining test can require more time than actually writing your
website
13

14. Why Webtests Slow
Launching new browser in every single test.
14
But,it makes your tests
slow

15. IS There Any Solution??
15

16. With Puppeteer tests are fast
16
How?
Browser Context, a high level API
which isolates your page from one another.

17. 100 * faster
17

18. Puppeteer
➔ Browser Automation Library
➔ Puppeteer=Node.js+Chrome
➔ Open pages navigate to website,evaluate javascript
18
➔ Same thing as any NPM library
➔ Any test runner:jest,ava,mocha……..

19. Runs Everywhere
● Desktop: Mac,Windows, Linux
● CI: Travis-CI,AppVeyor
● Cloud: GCP,AWS,Azure
● Docker Containers
19

20. Use Cases of Puppeteer
➔ Stealing Scraping content from websites and web applications;
➔ Automate tasks on web pages : form submission, keyboard and
mouse emulation;
➔ Web and UI testing : automated tests, browser features tests,
compatibility with Chrome versions;
➔ Taking screenshots and exporting web pages as PDF;
20

21. Simple Setup
21
npm install puppeteer
➔ Downloads the browser.
➔ No need to configure,link, otherwise to manage browser installation
➔ Just do npm install and ready to code

22. Initialize Puppeeteer
All code will go
in between these parenthesis.
//Screenshot
//Pdf
//Fake geolocation
22
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
});

23. Examples
23

24. Visit a website
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 800 })
await page.goto('https://pptr.dev/');
await browser.close();
});
24
➔ Launch puppeteer
➔ set a newpage
➔ Set viewport on that
page
➔ Open the address on
that page
➔ Close the browser

25. 25

26. 26
nothing happens and that’s normal !
Demo

27. 27
remember it is headless Chrome so no UI.
To see what’s happening you could add this launch option to
disable the headless mode in line 2. {headless:false}
Demo

28. Visit a website (headful mode)
28
puppeteer.launch({headless: false}).then(async browser => {

29. Using devtools without opening devtools
29
Most thing we do manually in browser
can be done using puppeteer. We can use chrome dev-tools
Without opening devtools
We can use the features of
devtools in puppeteer

30. DevTools protocol
Puppeteer control headless Chrome or Chromium
over the DevTools Protocol
30
The Chrome DevTools Protocol allows for tools to
instrument,inspect, debug.

31. Code Coverage
31

32. Extract code coverage using puppeteer
32
code:

33. Extract code coverage using puppeteer
33
output:

34. ● Navigating by URL
● Emulating Devices
● Handling Events
● Operating Mouse
● Code Coverage
We can do More...
34
● Operating Keyboard
● Taking Screenshots
● Generating PDF
● Faking Geolocation
● Accessibility

35. 35
➔ If you need to visually observe your test on the browser
➔ It does not give you exact feedback of what your customers will
actually experience on your website(Page loading speeds ...etc)
➔ If you need to do lots of debugging, headless debugging can be
difficult.
➔ Headless Browsers sometimes may throw errors that is not observed
on real browsers
When should we not use headless Browsers?

37. GitKraken is a Git GUI client for Windows, Mac and Linux.
It helps developers become more productive and efficient with Git.
Developed by -

38. Features of GitKraken
● Built-in merge tool
● Single-click undo-redo functions
● Keyboard shortcuts
● Support for Git Hooks, Gitflow, Submodules
● Built in SSH authentication
● Interactive Rebase
● Commit signing, etc
Along with some common git actions like -

39. Features of GitKraken
■ Undo
■ Redo
■ Pull
■ Push
■ Branch
■ Stash
■ Pop Stash
■ Squash
■ Drop, etc.

40. Features of GitKraken
Integrations with -
GitHub.com
Azure DevOps
(VSTS)
GitLab
GitLab.com Bitbucket.org

41. Pros & Cons

42. Why GitKraken?

43. ★ Cross-platform
○ Windows
○ Linux
○ Mac
★ Intuitive UI/UX
○ Visual commit history
○ Drag & Drop
○ Fuzzy finder
○ 1-click undo-redo
★ Speed and responsiveness
★ Merge conflict editor
★ Built-in code editor
○ Diff split view
○ Syntax highlighting
○ Search within files
○ File minimap
★ Issue tracking
○ Glo board
○ GitKraken timelines
★ Offers a simple way of undoing
mistakes

44. Glo Boards

45. GitKraken
Timeline

46. 73 companies reportedly use GitKraken in their tech stacks,
including Statista, Goodwings, and Tradecore
1.7 Million+ Devs Rely on GitKraken
The GitKraken is constantly updated

47. Cons of GitKraken
- Setting up auth with Git providers can be a pain
- No option to push tags with commits (have to push them separately and individually)
- Pricey
- Cannot access multiple repositories in the same session.

48. Merge Conflicts
● Tool resolve
● Deleted files
● Drag & Drop branch to merge

49. Merge vs Rebase

50. Merge vs Rebase

51. Some GitKraken Tips

52. 1. If you want to see just the commits for a specific branch, use the
soloing function.
2. Use GitKraken’s fuzzy finder to quickly open a repo, view file history,
and more.
3. Pull any branch, even if it isn’t checked out. Just select “Pull” in the
branch actions context menu (you can also push the branch the same
way).
4. Resize the commit graph to optimize space for repos with many
branches, even down to a single column.
5. Scale the UI to your liking with ⌘ | Ctrl + +/-, the zoom selector, or the
fuzzy finder.

53. 6. Forgot something in your previous commit’s message? Amend it by clicking
the message in
the right panel.
7. Drag-and-drop one remote onto another to quickly create a PR without
leaving GitKraken.
8. Select multiple commits in the graph and easily squash them with 1-click.
Use undo to reset
if necessary.
9. Use the fuzzy finder (⌘ | Ctrl + P) to quickly switch repos without leaving
the keyboard.
10. Keyboard shortcuts list: ( ⌘+/ ) for Mac, ( Ctrl+/ ) for Windows.

54. THANK YOU