212 lines
7.5 KiB
HTML
Executable File
212 lines
7.5 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en" style="background:white;">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>FrosCon - All your browsers are belogn to us</title>
|
|
<meta name="description" content="UI testing stuff">
|
|
<meta name="author" content="Sebastian Golasch">
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<link rel="stylesheet" href="css/reveal.min.css">
|
|
<link rel="stylesheet" href="css/theme/default.css" id="theme">
|
|
<!-- For syntax highlighting -->
|
|
<link rel="stylesheet" href="lib/css/zenburn.css">
|
|
<link rel="stylesheet" href="font/stylesheet.css">
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Londrina Solid';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Londrina Solid'), local('LondrinaSolid-Regular'), url('font/solid.woff') format('woff');
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Londrina Solid' !important;
|
|
color: red !important;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Londrina Solid' !important;
|
|
color: #4266a2 !important;
|
|
}
|
|
|
|
h3 {
|
|
font-family: 'Londrina Solid' !important;
|
|
color: #4266a2 !important;
|
|
}
|
|
|
|
.code {
|
|
font-family: 'Londrina Solid' !important;
|
|
color: red !important;
|
|
}
|
|
|
|
.variable {
|
|
color: hsl(88, 36%, 37%);
|
|
}
|
|
|
|
.function {
|
|
color: #4266a2;
|
|
}
|
|
|
|
.bracket {
|
|
color:#000;
|
|
}
|
|
|
|
.comment {
|
|
color:grey;
|
|
}
|
|
|
|
footer {
|
|
font-family: 'Londrina Solid' !important;
|
|
color: white;
|
|
z-index:9999;
|
|
display: block;
|
|
position:absolute;
|
|
bottom: 0;
|
|
right: 30px;
|
|
height: 100px;
|
|
background: #4266a2;
|
|
font-size: 30px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
img {
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="background:white;">
|
|
<div class="reveal" style="background:white;">
|
|
<!-- Any section element inside of this container is displayed as a slide -->
|
|
<div class="slides" style="background:white;">
|
|
|
|
<section>
|
|
<h1>FrosCon 2014</h1>
|
|
<h2>All your Browsers are belong to us</h2>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 style="color: red !important">Sebastian Golasch</h2>
|
|
<h2>DalekJS</h2>
|
|
<h2>Nightlybuild.io</h2>
|
|
<h2>Deutsche Telekom P&I</h2>
|
|
</section>
|
|
|
|
<section>
|
|
<img style="border: none; box-shadow: none" src="img/qivicon.png">
|
|
</section>
|
|
|
|
<section>
|
|
<h1>What the heck is Webdriver</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>WebDriver is a W3C editors draft for writing automated tests of websites.</h3>
|
|
</section>
|
|
|
|
<section>
|
|
<img style="border: none; box-shadow: none;" src="img/Webdriver.png"/>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>It aims to mimic the behaviour of a real user, and as such interacts with the HTML of the application.</h3>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Lets us control the browser from outside</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>All implementations of WebDriver that communicate with the browser use the JSON WireProtocol.</h3>
|
|
</section>
|
|
|
|
<section>
|
|
<img style="border: none; box-shadow: none;" src="img/JsonWireProtocol - selenium - A description of the protocol used by WebDriver to communicate with remote instances - Browser automation framework - Google Project Hosting.png"/>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>This wire protocol defines a RESTful web service using JSON over HTTP.</h3>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Turns your Browser into a REST Webserver</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>All you need to know is HTTP</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Anything that understands HTTP has access</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>This wire protocol defines a RESTful web service using JSON over HTTP.</h3>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Code Code Code!</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Browser Support</h1>
|
|
</section>
|
|
|
|
<section style="text-align: left; top: -377.5px; display: block;" class="present">
|
|
<h1 style="font-size: 240% !important"><img src="img/lemmling_ghost.png" style="position: relative; top: 25px; border: none; box-shadow: none"> PhantomJS</h1>
|
|
<h1 style="font-size: 240% !important"><img src="img/chrome.png" style="position: relative; top: 25px; border: none; box-shadow: none"> Chrome</h1>
|
|
<h1 style="font-size: 240% !important"><img src="img/explorer.png" style="position: relative; top: 25px; border: none; box-shadow: none"> Internet Explorer</h1>
|
|
<h1 style="font-size: 240% !important"><img src="img/ipad.png" style="position: relative; top: 25px; border: none; box-shadow: none"> Mobile Safari & Chrome</h1>
|
|
<h1 style="font-size: 240% !important"><img src="img/firefox.png" style="position: relative; top: 25px; border: none; box-shadow: none"> Firefox (OS)</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Multibrowser example</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Implementing protocols is FUN</h1>
|
|
</section>
|
|
|
|
<section>
|
|
<h1>Thank you!</h1>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<img src="img/twitter_bird.svg" style="border: none; box-shadow: none; width: 50% !important;position: relative; top: 0; left: 0;"/>
|
|
<img src="img/github.svg" style="border: none; box-shadow: none; width: 50% !important; position: relative; top: -70px; left: 60px;"/>
|
|
<p style="position: relative; top: -110px; left: 0px;">@asciidisco</p>
|
|
</footer>
|
|
|
|
<script src="lib/js/head.min.js"></script>
|
|
<script src="js/reveal.min.js"></script>
|
|
<script>
|
|
// Full list of configuration options available here:
|
|
// https://github.com/hakimel/reveal.js#configuration
|
|
Reveal.initialize({
|
|
controls: false,
|
|
progress: false,
|
|
history: true,
|
|
center: true,
|
|
|
|
// The "normal" size of the presentation, aspect ratio will be preserved
|
|
// when the presentation is scaled to fit different resolutions. Can be
|
|
// specified using percentage units.
|
|
width: 1024,
|
|
height: 768,
|
|
margin: 0,
|
|
transition: 'fade', // default/cube/page/concave/zoom/linear/fade/none
|
|
// Optional libraries used to extend on reveal.js
|
|
dependencies: [
|
|
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }
|
|
]
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |