How to use mouseClick method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

mouse.js

Source: mouse.js Github

copy
1//Version: 1.0.0
2
3var mouse = {}
4
5mouse.transform_map = function(deltaX, deltaY) {
6	var svgmap = d3.select("#svgmap");
7    deltaX = deltaX || 0;
8	deltaY = deltaY || 0;
9		
10	svgmap.selectAll(".map_node")
11    .attr("transform", 
12		  translate_map(deltaX, deltaY));
13	svgmap.selectAll(".map_river")
14    .attr("transform", 
15		  translate_map(deltaX, deltaY));
16	svgmap.selectAll("#mappath")
17	.attr("transform", 
18		  translate_map(deltaX, deltaY));
19	svgmap.selectAll(".map_collector")
20    .attr("transform", 
21		  translate_map(deltaX, deltaY));
22	svgmap.selectAll("#background")
23    .attr("transform", 
24		  translate_map(deltaX, deltaY));
25}
26
27mouse.mouse_over_node = function(text) {
28	var text_element = d3.select("#show_node_name").text(text);
29	var text_box = d3.select('#show_node_name_box');
30	var bb = text_element.node().getBBox();
31	text_box.attr('x', bb.x - 4)
32            .attr('y', bb.y)
33            .attr('width', bb.width + 8)
34            .attr('height', bb.height);
35}
36
37mouse.get_mouse_position = function(event) {
38    var xpos = event.pageX - $('#map').offset().left; // no offsetX in firefox
39    var ypos = event.pageY - $('#map').offset().top;
40	var x_map = (xpos - map_view.X)/map_view.get_scale();
41	var y_map = (ypos - map_view.Y)/map_view.get_scale();
42	return {x: x_map, y: y_map};
43}
44
45var mousewheel = {}
46
47mousewheel.init = function() {
48	var map = document.getElementById('map');
49	if (map.addEventListener) {
50		map.addEventListener("mousewheel", this.handler, false);
51		map.addEventListener("DOMMouseScroll", this.handler, false); //firefox
52	}
53}
54
55mousewheel.handler = function(event) {
56	var delta = event.wheelDelta || -event.detail; // detail firefox negative
57	var sign = delta > 0 ? 1 : delta < 0 ? -1 : 0; //sign
58	map_view.change_scale(sign);
59	mouse.transform_map();
60	if(event.preventDefault) {
61		event.preventDefault();
62	}
63	return false;
64}
65
66var mouseclick = {};
67
68mouseclick.modes = {
69		UP: "UP",
70		DOWN: "DOWN",
71		PUT_COLLECTOR: "PUT_COLLECTOR"
72}
73
74mouseclick.mode = mouseclick.modes.UP;
75mouseclick.type = ''
76
77mouseclick.startX = null;
78mouseclick.startY = null;
79
80mouseclick.init = function() {
81	var map = $("#svgmap");
82	var svgmap = d3.select("#svgmap");
83	map.mousedown(function(event){
84		console.log(event);
85		if (event.button == 0) {
86			
87			//Sample exampel by Jonas
88			if(event.altKey){
89				if (fu.models['resourceList'].hasSelectedResource()) {
90					var resourceKey = fu.models['resourceList'].getSelectedResource()
91					var mouse_coords = mouse.get_mouse_position(event);
92					var x_map = mouse_coords.x;
93					var y_map = mouse_coords.y;
94					var data = JSON.stringify({"samples":[{r :fu.models['resourceList'].getSelectedResource(), x: x_map, y: y_map}]});
95					var snap = 100;
96					$.ajax ({
97					    url: '/node/samples?snap='+snap,
98					    type: "POST",
99					    data: data,
100					    dataType: "json",
101					    contentType: "application/json",
102					    success: function(data){
103					    	//{"samples":[{"y":47,"x":-55,"r":536870912,"stability":33.969654,"v":1}]}
104					    	var sample = data.samples.shift();
105					    	var output = "(" + sample.x + ":"+ sample.y + ") value:"+ sample.v + " stability:" + sample.stability;
106					    	$('#mapInfo').html(output);
107						}
108					});
109				}
110				else {
111					$('#mapInfo').html("No resource selected!");
112				}
113			} else if (event.ctrlKey) {
114				if (fu.models['resourceList'].hasSelectedResource()) {
115					console.log(fu.models['resourceList'].getSelectedResource());
116					var mouse_coords = mouse.get_mouse_position(event);
117					var x_map = mouse_coords.x;
118					var y_map = mouse_coords.y;
119					var data = JSON.stringify({"nodes":[{r :fu.models['resourceList'].getSelectedResource(), x: x_map, y: y_map, v: 1}]});
120					$.ajax ({
121					    url: '/node/set',
122					    type: "POST",
123					    data: data,
124					    dataType: "json",
125					    contentType: "application/json",
126					    success: function(data){
127							svgmap.append('rect')
128							  .attr('class', 'map_collector')
129						      .attr('x', x_map - 120)
130						      .attr('y', y_map - 120)
131						      .attr('width', 240)
132						      .attr('height', 240)
133						      .attr('fill', 'yellow')
134						      .attr('stroke', 'black')
135						      .attr('stroke-width', 40)
136						      .attr("transform", 
137					   		   translate_map());
138						}
139					});
140//					$.post('/node/set', data, function(data){
141//						svgmap.append('rect')
142//						  .attr('class', 'map_collector')
143//					      .attr('x', x_map - 120)
144//					      .attr('y', y_map - 120)
145//					      .attr('width', 240)
146//					      .attr('height', 240)
147//					      .attr('fill', 'yellow')
148//					      .attr('stroke', 'black')
149//					      .attr('stroke-width', 40)
150//					      .attr("transform", 
151//				   		   translate_map());
152//					});
153				}
154			} else if (mouseclick.mode === mouseclick.modes.UP) {
155				mouseclick.mode = mouseclick.modes.DOWN;
156				mouseclick.startX = event.pageX;
157				mouseclick.startY = event.pageY;
158				if(event.preventDefault) {
159					event.preventDefault();
160				}
161				return false;
162			} else if (mouseclick.mode == mouseclick.modes.PUT_COLLECTOR) {
163				mouseclick.mode = mouseclick.modes.UP;
164				d3.select('#put_cursor').remove();
165				var mouse_coords = mouse.get_mouse_position(event);
166				var x_map = mouse_coords.x;
167				var y_map = mouse_coords.y;
168				$.ajax ({
169				    url: '/player/putcollector/',
170				    type: "POST",
171				    data: {'x': x_map, 'y': y_map, 'type': mouseclick.type},
172				    dataType: "json",
173				    contentType: "application/json",
174				    success: function(data) {
175				    	console.log('fu.msg.updateActivePlayer.dispatch()');
176					fu.msg.updateActivePlayer.dispatch();
177					fu.msg.drawMap.dispatch();
178				    }
179				});
180			}
181		}
182	});
183	map.mousemove(function(event){
184		if (mouseclick.mode == mouseclick.modes.PUT_COLLECTOR) {
185			d3.select('#put_cursor').remove();
186			var mouse_coords = mouse.get_mouse_position(event);
187			var x_map = mouse_coords.x;
188			var y_map = mouse_coords.y;
189			svgmap.append('rect')
190			      .attr('class', 'map_collector')
191			      .attr('id', 'put_cursor')
192			      .attr('x', x_map - 120)
193			      .attr('y', y_map - 120)
194			      .attr('width', 240)
195			      .attr('height', 240)
196			      .attr('fill', 'yellow')
197			      .attr('stroke', 'black')
198			      .attr('stroke-width', 40)
199			      .attr('fill-opacity', 0.2)
200			      .attr("transform", 
201		   		   translate_map());
202			      
203			if(event.preventDefault) {
204				event.preventDefault();
205			}
206			return false;
207		}
208	});
209	
210	var html = $("html");
211	html.mousemove(function(event){
212		if (event.button == 0) {
213			if (mouseclick.mode == mouseclick.modes.DOWN) {
214				var deltaX = event.pageX - mouseclick.startX;
215				var deltaY = event.pageY - mouseclick.startY;
216				mouse.transform_map(deltaX, deltaY);
217			}
218			if(event.preventDefault) {
219				event.preventDefault();
220			}
221			return false;
222		}
223	});
224	html.mouseup(function(event){
225		if (event.button == 0) {
226			if (mouseclick.mode == mouseclick.modes.DOWN) {
227				var deltaX = event.pageX - mouseclick.startX;
228				var deltaY = event.pageY - mouseclick.startY;
229				map_view.X += deltaX
230				map_view.Y += deltaY
231				mouse.transform_map();
232				mouseclick.mode = mouseclick.modes.UP;
233			}
234			if(event.preventDefault) {
235				event.preventDefault();
236			}
237			return false;
238		}
239	});
240}
241
242//mouseclick.put_collector = function() {
243//	d3.select('#put_cursor').remove();
244//	if (mouseclick.mode == mouseclick.modes.PUT_COLLECTOR) {
245//		mouseclick.mode = mouseclick.modes.UP;
246//	} else {
247//		mouseclick.mode = mouseclick.modes.PUT_COLLECTOR;
248//	}
249//}
250
251
252
253
Full Screen

browser_tabview_bug649006.js

Source: browser_tabview_bug649006.js Github

copy
1/* Any copyright is dedicated to the Public Domain.
2   http://creativecommons.org/publicdomain/zero/1.0/ */
3let contentWindow;
4let contentElement;
5let groupItem;
6
7function test() {
8  waitForExplicitFinish();
9
10  registerCleanupFunction(function () {
11    hideTabView();
12  });
13
14  showTabView(function() {
15    contentWindow = TabView.getContentWindow();
16    contentElement = contentWindow.document.getElementById("content");
17    test1();
18  });
19}
20
21function test1() {
22  is(gBrowser.tabs.length, 1, 
23     "Total number of tabs is 1 before right button double click");
24  // first click
25  mouseClick(contentElement, 2);
26  // second click
27  mouseClick(contentElement, 2);
28
29  is(gBrowser.tabs.length, 1, 
30     "Total number of tabs is 1 after right button double click");
31  test2();
32}
33
34
35function test2() {
36  is(gBrowser.tabs.length, 1, 
37     "Total number of tabs is 1 before left, right and left mouse clicks");
38
39  // first click
40  mouseClick(contentElement, 0);
41  // second click
42  mouseClick(contentElement, 2);
43  // third click
44  mouseClick(contentElement, 0);
45
46  is(gBrowser.tabs.length, 1, 
47     "Total number of tabs is 1 before left, right and left mouse clicks");
48  test3();
49}
50
51function test3() {
52  ok(contentWindow.GroupItems.groupItems.length, 1, "Only one group item exists");
53  groupItem = contentWindow.GroupItems.groupItems[0];
54
55  is(groupItem.getChildren().length, 1, 
56     "The number of tab items in the group is 1 before right button double click");
57
58  // first click
59  mouseClick(groupItem.container, 2);
60  // second click
61  mouseClick(groupItem.container, 2);
62
63  is(groupItem.getChildren().length, 1, 
64     "The number of tab items in the group is 1 after right button double click");
65  test4();
66}
67
68function test4() {
69  is(groupItem.getChildren().length, 1, 
70     "The number of tab items in the group is 1 before left, right, left mouse clicks");
71
72  // first click
73  mouseClick(groupItem.container, 0);
74  // second click
75  mouseClick(groupItem.container, 2);
76  // third click
77  mouseClick(groupItem.container, 0);
78
79  is(groupItem.getChildren().length, 1, 
80     "The number of tab items in the group is 1 before left, right, left mouse clicks");
81
82  hideTabView(function() {
83    is(gBrowser.tabs.length, 1, "Total number of tabs is 1 after all tests");
84    finish();
85  });
86}
87
88function mouseClick(targetElement, buttonCode) {
89  EventUtils.sendMouseEvent(
90    { type: "mousedown", button: buttonCode }, targetElement, contentWindow);
91  EventUtils.sendMouseEvent(
92    { type: "mouseup", button: buttonCode }, targetElement, contentWindow);
93}
94
95
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)