Skip to content

Instantly share code, notes, and snippets.

@twalpole

twalpole/test_hover_child.rb

Last active October 6, 2019 20:31
Show Gist options
  • Save twalpole/e081df8a3d9ebe52136c8d2593a96006 to your computer and use it in GitHub Desktop.
Save twalpole/e081df8a3d9ebe52136c8d2593a96006 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test_hover_child.rb
require 'bundler/inline'
gemfile do
source 'https://rubygems.org'
gem 'capybara'
gem 'puma'
gem 'selenium-webdriver'
gem 'webdrivers'
gem 'byebug'
end
require 'selenium-webdriver'
require "capybara/dsl"
html = DATA.read
app = proc { |env| [200, { "Content-Type" => "text/html" }, [html] ] }
%i[selenium_chrome selenium_chrome_headless].each do |driver|
puts "Using #{driver}"
sess = Capybara::Session.new(driver, app)
sess.visit('/')
sleep 3 # just to make sure page is loaded
sess.assert_no_text('Some content')
# sess.find('.hoverme').hover
sess.find('#next').hover
sess.assert_text('Some content')
end
__END__
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hoverme{
z-index: 110000;
position: fixed;
bottom: 0;
right: 0;
background-color: red;
width: auto;
height: auto;
}
#next{
position: absolute;
bottom: 70px;
right: 0;
width: 100px;
height: 50px;
background-color: blue;
}
#preview{
position: absolute;
pointer-events: none;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
opacity: 0;
}
.hoverme:hover #preview{
opacity: 1;
}
.hoverme:hover #next{
opacity: 0;
}
#frame{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<iframe id="frame" src="https://www.wikipedia.com"></iframe>
<a href="https://www.google.com" target="_self">
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<div class="hoverme" id="test">
<div id="next">
<div color="#FFFFFF" font-family="Roboto" font-weight="normal" font-size="24px">Next &nbsp;<i class="fa fa-arrow-right sc-hBbWxd csYcMm"></i></div>
</div>
<div id="preview">
<div>
<div color="#222222" font-family="Roboto" font-weight="normal" font-size="24px" id="anotherdiv">Next &nbsp;<i class="fa fa-arrow-right sc-hBbWxd csYcMm"></i></div>
<div id="image">
<img src="https://www.wikipedia.com">
</div>
<div color="#222222" font-family="Roboto" font-weight="bold" font-size="15px" id="override">Some content</div>
</div>
</div>
</div>
</a>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment