-
-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1.7.3
- Loading branch information
Showing
12 changed files
with
955 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -71,4 +71,4 @@ describe("cy.realTouch", () => { | |
}) | ||
.realTouch({ radiusX: 5, radiusY: 7 }); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
import * as pixelmatch from 'pixelmatch' | ||
import { PNG } from 'pngjs/browser'; | ||
|
||
/** | ||
* No matter how th viewport is scaled by cypress, all clicks and draws should not be moved by more than 1 px in y and x direction | ||
* 1px tolerance in each direction is ok, because the scaling forces the click coordinates to round up or down | ||
* 1px movement in one direction makes a difference of two pixels | ||
* **/ | ||
|
||
describe('draw on canvas with scaled viewport',()=>{ | ||
beforeEach(() => { | ||
cy.visit("./cypress/fixtures/drawCanvas.html"); | ||
}); | ||
|
||
it('clicks custom coordinates and viewport scaling',()=>{ | ||
// default cypress scale | ||
cy.viewport(1000, 660 ); | ||
const canvas = 'canvas' | ||
cy.get(canvas).realClick({ x: 100, y: 100 }) | ||
cy.get(canvas).realClick({ x: 200, y: 200 }) | ||
cy.get(canvas).realClick({ x: 300, y: 300}) | ||
cy.get(canvas).then(cnv =>{ | ||
const url = cnv[0].toDataURL('image/png'); | ||
const realData = url.replace(/^data:image\/png;base64,/, '') | ||
cy.writeFile('cypress/screenshots/compareFile/clickDraw100.png', realData, 'base64') | ||
/** | ||
* Three clicks produce three 3x3 Pixel rectangles | ||
* Each of them should not be moved more than 1px in each direction | ||
* --> max allowed difference to the reference image 18px | ||
**/ | ||
compareImages('clickDraw100.png', 'clickDraw.png', 'clickDraw100Diff.png').should('be.lessThan', 33) | ||
}) | ||
cy.get('input').click(); | ||
cy.viewport(1500, 1500 ); | ||
cy.get(canvas).realClick({ x: 100, y: 100 }) | ||
cy.get(canvas).realClick({ x: 200, y: 200 }) | ||
cy.get(canvas).realClick({ x: 300, y: 300}) | ||
cy.get(canvas).then(cnv =>{ | ||
const url = cnv[0].toDataURL('image/png'); | ||
const data = url.replace(/^data:image\/png;base64,/, '') | ||
cy.writeFile('cypress/screenshots/compareFile/clickDrawScaled.png', data, 'base64') | ||
compareImages('clickDrawScaled.png', 'clickDraw.png', 'clickDrawScaledDiff.png').should('be.lessThan', 33) | ||
}) | ||
}) | ||
|
||
it('touches custom coordinates with radius and viewport scaling',()=>{ | ||
// default cypress scale | ||
cy.viewport(1000, 660 ); | ||
const canvas = 'canvas' | ||
cy.get(canvas).realTouch({ x: 100, y: 100 }) | ||
cy.get(canvas).realTouch({ x: 200, y: 200, radius: 10 }) | ||
cy.get(canvas).realTouch({ x: 300, y: 300, radiusX: 10, radiusY: 5 }) | ||
cy.get(canvas).then(cnv =>{ | ||
const url = cnv[0].toDataURL('image/png'); | ||
const data = url.replace(/^data:image\/png;base64,/, '') | ||
cy.writeFile('cypress/screenshots/compareFile/touchDraw100.png', data, 'base64') | ||
/** | ||
* Three touches with different radius create the following rectanges: | ||
* Radius 0 --> default 3x3 | ||
* Radius 10 --> 10x10 | ||
* Radius x:10 y:5 --> 10x15 | ||
* Each of them should not be moved more than 1px in each direction | ||
* --> max allowed difference to the reference image 31px | ||
**/ | ||
compareImages('touchDraw100.png', 'touchDraw.png', 'touchDraw100Diff.png').should('be.lessThan', 63) | ||
}) | ||
cy.get('input').click(); | ||
cy.viewport(2000, 2000 ); | ||
cy.get(canvas).realTouch({ x: 100, y: 100 }) | ||
cy.get(canvas).realTouch({ x: 200, y: 200, radius: 10 }) | ||
cy.get(canvas).realTouch({ x: 300, y: 300, radiusX: 10, radiusY: 5 }) | ||
cy.get(canvas).then(cnv =>{ | ||
const url = cnv[0].toDataURL('image/png'); | ||
const data = url.replace(/^data:image\/png;base64,/, '') | ||
cy.writeFile('cypress/screenshots/compareFile/touchDrawScaled.png', data, 'base64') | ||
compareImages('touchDrawScaled.png', 'touchDraw.png', 'touchDrawScaledDiff.png').should('be.lessThan', 63) | ||
}) | ||
}) | ||
}) | ||
|
||
const compareImages = (realFile: string, compareFile: string, diffFile: string): Cypress.Chainable<number> => { | ||
return cy.fixture('images/'+compareFile, null).then((compareDate: Uint8Array)=> { | ||
return cy.readFile('cypress/screenshots/compareFile/'+realFile, null).then((realData: Uint8Array) =>{ | ||
|
||
const a = PNG.sync.read(realData); | ||
const b = PNG.sync.read(compareDate); | ||
const {width, height} = a; | ||
const diff = new PNG({width, height}); | ||
const diffPixel = pixelmatch(a.data, b.data, diff.data, width, height, {}); | ||
return cy.writeFile('cypress/screenshots/compareFile/'+diffFile, PNG.sync.write(diff).toString('binary'), { encoding: 'binary' }).then(()=>{ | ||
return diffPixel | ||
}) | ||
|
||
}) | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,155 @@ | ||
<!-- Thanks to https://stackoverflow.com/a/8398189/4528081 --> | ||
<html lang="en"> | ||
<script type="text/javascript"> | ||
let canvas, ctx, flag = false, | ||
prevX = 0, | ||
currX = 0, | ||
prevY = 0, | ||
currY = 0, | ||
dot_flag = false; | ||
|
||
let x = "black", | ||
y = 2; | ||
|
||
function init() { | ||
canvas = document.getElementById('can'); | ||
ctx = canvas.getContext("2d"); | ||
w = canvas.width; | ||
h = canvas.height; | ||
|
||
canvas.addEventListener("mousemove", function (e) { | ||
findxy('move', e) | ||
}, false); | ||
canvas.addEventListener("mousedown", function (e) { | ||
findxy('down', e) | ||
}, false); | ||
canvas.addEventListener("mouseup", function (e) { | ||
findxy('up', e) | ||
}, false); | ||
canvas.addEventListener("mouseout", function (e) { | ||
findxy('out', e) | ||
}, false); | ||
|
||
canvas.addEventListener("pointermove", function (e) { | ||
findxy('move', e) | ||
}, false); | ||
canvas.addEventListener("pointerdown", function (e) { | ||
findxy('down', e) | ||
}, false); | ||
canvas.addEventListener("pointerup", function (e) { | ||
findxy('up', e) | ||
}, false); | ||
canvas.addEventListener("pointerout", function (e) { | ||
findxy('out', e) | ||
}, false); | ||
|
||
} | ||
|
||
function color(obj) { | ||
switch (obj.id) { | ||
case "green": | ||
x = "green"; | ||
break; | ||
case "blue": | ||
x = "blue"; | ||
break; | ||
case "red": | ||
x = "red"; | ||
break; | ||
case "yellow": | ||
x = "yellow"; | ||
break; | ||
case "orange": | ||
x = "orange"; | ||
break; | ||
case "black": | ||
x = "black"; | ||
break; | ||
case "white": | ||
x = "white"; | ||
break; | ||
} | ||
if (x === "white") y = 14; | ||
else y = 2; | ||
|
||
} | ||
|
||
function draw() { | ||
ctx.beginPath(); | ||
ctx.moveTo(prevX, prevY); | ||
ctx.lineTo(currX, currY); | ||
ctx.strokeStyle = x; | ||
ctx.lineWidth = y; | ||
ctx.stroke(); | ||
ctx.closePath(); | ||
} | ||
|
||
function erase() { | ||
ctx.clearRect(0, 0, w, h); | ||
} | ||
|
||
|
||
function findxy(res, e) { | ||
const w = e.width ? e.width : 3; | ||
const h = e.height ? e.height : 3; | ||
if (res === 'down') { | ||
prevX = currX; | ||
prevY = currY; | ||
currX = e.clientX - canvas.offsetLeft; | ||
currY = e.clientY - canvas.offsetTop; | ||
|
||
flag = true; | ||
dot_flag = true; | ||
if (dot_flag) { | ||
ctx.beginPath(); | ||
ctx.fillStyle = x; | ||
ctx.fillRect(currX, currY, w, h); | ||
ctx.closePath(); | ||
dot_flag = false; | ||
} | ||
} | ||
if (res === 'up' || res === "out") { | ||
flag = false; | ||
} | ||
if (res === 'move') { | ||
if (flag) { | ||
prevX = currX; | ||
prevY = currY; | ||
currX = e.clientX - canvas.offsetLeft; | ||
currY = e.clientY - canvas.offsetTop; | ||
draw(); | ||
} | ||
} | ||
} | ||
</script> | ||
<head> | ||
<style> | ||
.grid-container { | ||
display: inline-grid; | ||
} | ||
</style> | ||
<title>Draw Canvas</title> | ||
</head> | ||
<body onload="init()"> | ||
<div class="grid-container"> | ||
|
||
<div class="grid-item"> | ||
<div style="top:12%;left:43%;">Choose Color</div> | ||
<div style="top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div> | ||
<div style="top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div> | ||
<div style="top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div> | ||
<div style="top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div> | ||
<div style="top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div> | ||
<div style="top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div> | ||
</div> | ||
<canvas class="grid-item" id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas> | ||
<div class="grid-item"> | ||
<div style="top:20%;left:43%;">Eraser</div> | ||
<div style="top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div> | ||
</div> | ||
|
||
<input class="grid-item" type="button" value="clear" id="clr" size="23" onclick="erase()" style="top:55%;left:15%;"> | ||
</div> | ||
|
||
</body> | ||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.