Skip to content

Commit ea0d58b

Browse files
pavelfeldmanpavelfeldman
authored
test: add click and check tests (microsoft#38)
1 parent f6a03eb commit ea0d58b

19 files changed

+1727
-158
lines changed

‎playwright/page.py

+5-3
Original file line numberDiff line numberDiff line change
@@ -460,9 +460,11 @@ async def emulateMedia(
460460
) -> None:
461461
await self._channel.send("emulateMedia", locals_to_params(locals()))
462462

463-
async def setViewportSize(self, viewport_size: Dict) -> None:
464-
self._viewport_size = viewport_size
465-
await self._channel.send("setViewportSize", dict(viewportSize=viewport_size))
463+
async def setViewportSize(self, width: int, height: int) -> None:
464+
self._viewport_size = dict(width=width, height=height)
465+
await self._channel.send(
466+
"setViewportSize", dict(viewportSize=locals_to_params(locals()))
467+
)
466468

467469
def viewportSize(self) -> Optional[Dict]:
468470
return self._viewport_size

‎tests/assets/input/animating-button.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<style>
2+
body, html { margin: 0; padding: 0; }
3+
@keyframes move {
4+
from { marign-left: 0; }
5+
to { margin-left: 100px; }
6+
}
7+
</style>
8+
<script>
9+
function addButton() {
10+
const button = document.createElement('button');
11+
button.textContent = 'Click me';
12+
button.style.animation = '3s linear move';
13+
button.style.animationIterationCount = 'infinite';
14+
button.addEventListener('click', () => window.clicked = true);
15+
document.body.appendChild(button);
16+
}
17+
18+
function stopButton(remove) {
19+
const button = document.querySelector('button');
20+
button.style.marginLeft = button.getBoundingClientRect().left + 'px';
21+
button.style.animation = '';
22+
if (remove)
23+
button.remove();
24+
}
25+
26+
let x = 0;
27+
function jump() {
28+
x += 300;
29+
const button = document.querySelector('button');
30+
button.style.marginLeft = x + 'px';
31+
}
32+
33+
function startJumping() {
34+
x = 0;
35+
const moveIt = () => {
36+
jump();
37+
requestAnimationFrame(moveIt);
38+
};
39+
setInterval(jump, 0);
40+
moveIt();
41+
}
42+
</script>

‎tests/assets/input/checkbox.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Selection Test</title>
5+
</head>
6+
<body>
7+
<label for="agree">Remember Me</label>
8+
<input id="agree" type="checkbox">
9+
<script>
10+
window.result = {
11+
check: null,
12+
events: [],
13+
};
14+
15+
let checkbox = document.querySelector('input');
16+
17+
const events = [
18+
'change',
19+
'click',
20+
'dblclick',
21+
'input',
22+
'mousedown',
23+
'mouseenter',
24+
'mouseleave',
25+
'mousemove',
26+
'mouseout',
27+
'mouseover',
28+
'mouseup',
29+
];
30+
31+
for (let event of events) {
32+
checkbox.addEventListener(event, () => {
33+
if (['change', 'click', 'dblclick', 'input'].includes(event) === true) {
34+
result.check = checkbox.checked;
35+
}
36+
37+
result.events.push(event);
38+
}, false);
39+
}
40+
</script>
41+
</body>
42+
</html>

‎tests/assets/input/keyboard.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Keyboard test</title>
5+
</head>
6+
<body>
7+
<textarea></textarea>
8+
<script>
9+
window.result = "";
10+
let textarea = document.querySelector('textarea');
11+
textarea.focus();
12+
textarea.addEventListener('keydown', event => {
13+
log('Keydown:', event.key, event.code, event.which, modifiers(event));
14+
});
15+
textarea.addEventListener('keypress', event => {
16+
log('Keypress:', event.key, event.code, event.which, event.charCode, modifiers(event));
17+
});
18+
textarea.addEventListener('keyup', event => {
19+
log('Keyup:', event.key, event.code, event.which, modifiers(event));
20+
});
21+
function modifiers(event) {
22+
let m = [];
23+
if (event.altKey)
24+
m.push('Alt')
25+
if (event.ctrlKey)
26+
m.push('Control');
27+
if (event.shiftKey)
28+
m.push('Shift')
29+
return '[' + m.join(' ') + ']';
30+
}
31+
function log(...args) {
32+
console.log.apply(console, args);
33+
result += args.join(' ') + '\n';
34+
}
35+
function getResult() {
36+
let temp = result.trim();
37+
result = "";
38+
return temp;
39+
}
40+
</script>
41+
</body>
42+
</html>

‎tests/assets/input/rotatedButton.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Rotated button test</title>
5+
</head>
6+
<body>
7+
<script src="mouse-helper.js"></script>
8+
<button onclick="clicked();">Click target</button>
9+
<style>
10+
button {
11+
transform: rotateY(180deg);
12+
}
13+
</style>
14+
<script>
15+
window.result = 'Was not clicked';
16+
function clicked() {
17+
result = 'Clicked';
18+
}
19+
</script>
20+
</body>
21+
</html>

‎tests/assets/input/touches.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Touch test</title>
5+
</head>
6+
<body>
7+
<script src="mouse-helper.js"></script>
8+
<button onclick="clicked();">Click target</button>
9+
<script>
10+
window.result = [];
11+
const button = document.querySelector('button');
12+
button.style.height = '200px';
13+
button.style.width = '200px';
14+
button.focus();
15+
button.addEventListener('touchstart', event => {
16+
log('Touchstart:', ...Array.from(event.changedTouches).map(touch => touch.identifier));
17+
});
18+
button.addEventListener('touchend', event => {
19+
log('Touchend:', ...Array.from(event.changedTouches).map(touch => touch.identifier));
20+
});
21+
button.addEventListener('touchmove', event => {
22+
log('Touchmove:', ...Array.from(event.changedTouches).map(touch => touch.identifier));
23+
});
24+
function log(...args) {
25+
console.log.apply(console, args);
26+
result.push(args.join(' '));
27+
}
28+
function getResult() {
29+
let temp = result;
30+
result = [];
31+
return temp;
32+
}
33+
</script>
34+
</body>
35+
</html>

‎tests/assets/react.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<head>
2+
<script src="./react/[email protected]"></script>
3+
<script src="./react/[email protected]"></script>
4+
</head>
5+
<body>
6+
<div class='react-root'></div>
7+
<script>
8+
window.e = React.createElement;
9+
window.reactRoot = document.querySelector('.react-root');
10+
window.renderComponent = c => ReactDOM.render(c, window.reactRoot);
11+
12+
window.MyButton = class MyButton extends React.Component {
13+
constructor(props) {
14+
super(props);
15+
this.state = { hovered: false };
16+
}
17+
render() {
18+
return e('button', {
19+
disabled: !!this.props.disabled,
20+
onClick: () => {
21+
window[this.props.name] = true;
22+
},
23+
onMouseEnter: () => {
24+
if (this.props.renameOnHover)
25+
this.setState({ hovered: true });
26+
if (this.props.onHover)
27+
this.props.onHover();
28+
},
29+
}, this.state.hovered ? 'Hovered' : this.props.name);
30+
}
31+
};
32+
</script>
33+
</body>

0 commit comments

Comments
 (0)