plwr 0.21.0

Playwright CLI for browser automation using CSS selectors.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<!DOCTYPE html>
<html>
<head><title>Form</title>
<style>
  .tooltip { display: none; }
  .hover-target:hover + .tooltip { display: block; }
  .scroll-spacer { height: 2000px; }
  #blur-msg, #focus-msg { display: none; }
</style>
</head>
<body>
  <h1>Form</h1>
  <input id="name" type="text">
  <button id="btn" onclick="document.getElementById('result').textContent='Hello, '+document.getElementById('name').value">Go</button>
  <div id="result"></div>
  <input id="upload" type="file" multiple onchange="document.getElementById('file-result').textContent=Array.from(this.files).map(f=>f.name).join(',')">
  <div id="file-result"></div>
  <input id="hidden-upload" type="file" style="display: none" onchange="document.getElementById('hidden-file-result').textContent=Array.from(this.files).map(f=>f.name).join(',')">
  <div id="hidden-file-result"></div>

  <!-- Select dropdown -->
  <select id="color">
    <option value="">--pick--</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
  <div id="color-result"></div>
  <script>
    document.getElementById('color').addEventListener('change', function() {
      document.getElementById('color-result').textContent = this.value;
    });
  </script>

  <select id="multi" multiple>
    <option value="a">Alpha</option>
    <option value="b">Beta</option>
    <option value="c">Gamma</option>
    <option value="d">Delta</option>
  </select>
  <div id="multi-result"></div>
  <script>
    document.getElementById('multi').addEventListener('change', function() {
      var sel = Array.from(this.selectedOptions).map(o => o.value);
      document.getElementById('multi-result').textContent = sel.join(',');
    });
  </script>

  <!-- Checkboxes and radios -->
  <input type="checkbox" id="agree">
  <label for="agree">I agree</label>
  <input type="checkbox" id="newsletter" checked>
  <label for="newsletter">Newsletter</label>
  <input type="radio" name="plan" id="plan-free" value="free">
  <label for="plan-free">Free</label>
  <input type="radio" name="plan" id="plan-pro" value="pro">
  <label for="plan-pro">Pro</label>

  <!-- Hover -->
  <div class="hover-target" id="hover-me">Hover over me</div>
  <div class="tooltip" id="hover-tooltip">Tooltip visible</div>

  <!-- Dblclick -->
  <div id="dblclick-target">Double-click me</div>
  <div id="dblclick-result"></div>
  <script>
    document.getElementById('dblclick-target').addEventListener('dblclick', function() {
      document.getElementById('dblclick-result').textContent = 'double-clicked';
    });
  </script>

  <!-- Focus / blur -->
  <input id="focus-input" type="text"
    onfocus="document.getElementById('focus-msg').style.display='block'"
    onblur="document.getElementById('blur-msg').style.display='block'">
  <div id="focus-msg">focused</div>
  <div id="blur-msg">blurred</div>

  <!-- Input value -->
  <input id="prefilled" type="text" value="initial-value">
  <textarea id="textarea">hello world</textarea>

  <!-- Scroll target -->
  <div class="scroll-spacer"></div>
  <div id="scroll-target">I am below the fold</div>

  <!-- innerHTML -->
  <div id="rich-content"><strong>bold</strong> and <em>italic</em></div>

  <!-- Clipboard -->
  <div id="clip-source">clipboard test content</div>
  <input id="clip-target" type="text">
  <div id="clip-paste-result"></div>
  <script>
    document.getElementById('clip-target').addEventListener('paste', function(e) {
      document.getElementById('clip-paste-result').textContent = 'pasted:' + (e.clipboardData.getData('text/plain') || '');
    });
  </script>

  <!-- Contenteditable (for type command) -->
  <div id="editable" contenteditable="true"></div>

  <!-- Modifier clicks -->
  <div id="mod-target">Click me</div>
  <div id="mod-result"></div>
  <script>
    document.getElementById('mod-target').addEventListener('click', function(e) {
      var mods = [];
      if (e.altKey) mods.push('alt');
      if (e.ctrlKey) mods.push('ctrl');
      if (e.metaKey) mods.push('meta');
      if (e.shiftKey) mods.push('shift');
      document.getElementById('mod-result').textContent = mods.join('+') || 'none';
    });
    document.getElementById('mod-target').addEventListener('auxclick', function(e) {
      if (e.button === 1) {
        document.getElementById('mod-result').textContent = 'middle';
      }
    });
    document.getElementById('mod-target').addEventListener('contextmenu', function(e) {
      e.preventDefault();
      document.getElementById('mod-result').textContent = 'right';
    });
  </script>
</body>
</html>