This commit is contained in:
Vinod Kumar Sharma 2022-11-03 12:59:11 +05:30
Родитель bc35d74b04
Коммит 287be451d6
6 изменённых файлов: 21 добавлений и 146 удалений

Просмотреть файл

@ -1,67 +0,0 @@
export const compareDoms = (baselineDom, candidateDom) => {
let BTagName = Object.keys(baselineDom)[0];
let CTageName = Object.keys(candidateDom)[0];
console.log(`BTagName, CTagname: ${BTagName} ${CTageName}`);
if((baselineDom[BTagName]["uniqueId"] == candidateDom[CTageName]["uniqueId"]) && !candidateDom[CTageName]["found"]){
baselineDom[BTagName]["found"] = true;
candidateDom[CTageName]["found"] = true;
console.log(`found`);
const cssComparisonResult = compareNodeCSS(baselineDom[BTagName]["cssProps"], candidateDom[CTageName]["cssProps"]);
if(Object.keys(cssComparisonResult).length > 0){
console.log(`cssComparisonResult: ${baselineDom[BTagName]["uniqueId"]}, ${candidateDom[BTagName]["uniqueId"]}`)
}
candidateDom[CTageName]["cssComparisonResult"] = cssComparisonResult;
baselineDom[BTagName]["cssComparisonResult"] = cssComparisonResult;
candidateDom[CTageName]["childNodes"].forEach((CChildNode) => {
for(let i=0; i<baselineDom[BTagName]["childNodes"].length; i++){
let BChildNode = baselineDom[BTagName]["childNodes"][i];
if(compareDoms(BChildNode, CChildNode)){
break;
}
}
});
return true;
}
return false;
}
const compareNodeCSS = (baseLineCSS, candidateCSS) => {
// console.log(`comparing CSS ${baseLineCSS} ${candidateCSS}`);
const cssComparisonResult = {};
for(const [key, value] of Object.entries(baseLineCSS)){
if(candidateCSS[key] == undefined) {
cssComparisonResult[key] = {
"candidate": "DE",
"baseline": value
}
continue;
}
if(candidateCSS[key] !== value){
cssComparisonResult[key] = {
"candidate": candidateCSS[key],
"baseline": baseLineCSS[key]
}
}
}
for(const [key, value] of Object.entries(candidateCSS)){
if(baseLineCSS[key] == undefined) {
cssComparisonResult[key] = {
"candidate": value,
"baseline": "DE"
}
}
}
return cssComparisonResult;
}
export default compareDoms;

Просмотреть файл

@ -1,15 +1,12 @@
import {Page} from "playwright";
import * as fs from "fs";
import { compress } from "compress-json";
/**
* parseHTMLAndKeepRelations (Without underscore) contains the logic of parsing DOM.
*/
const parseHTMLAndKeepRelations = (selector: string) => {
let pageElements: any;
let dummy = document.createElement( 'element-' + ( new Date().getTime() ) );
document.body.appendChild( dummy );
// console.log(`dummmy: ${JSON.stringify(window.getComputedStyle(dummy))}`);
document.body.appendChild( dummy );
const dummyElementStyleKeys = Object.keys(window.getComputedStyle(dummy));
if(selector !== ""){
@ -20,15 +17,12 @@ const parseHTMLAndKeepRelations = (selector: string) => {
pageElements = document.querySelectorAll("*");
}
// console.log(`selector, pageElements: ${selector}, ${pageElements}`);
let pageParsedDom = {}
let totalDomElementParsed = 0;
for(const element of pageElements){
if(!element["visited"]){
pageParsedDom = iterateDomElements(element, "", 0, 0, 1);
}else{
// console.log(`element, visited ${JSON.stringify(element["visited"])}`);
}
}
@ -39,7 +33,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
}
}
// console.log(`pageParsedDom = ${JSON.stringify(pageParsedDom, null, 2)}`);
return [
pageParsedDom,
totalDomElementParsed
@ -53,7 +46,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
}
function iterateDomElements(node, parent, id, parentId, _nthChild) {
// console.log(parent + " --> " + node.tagName);
++totalDomElementParsed;
node["visited"] = true;
let name = node["tagName"].toLowerCase();
@ -77,15 +69,12 @@ const parseHTMLAndKeepRelations = (selector: string) => {
};
setParsedDomKeys(node, domElement, name, id, parentId);
// console.log(`domElement ${JSON.stringify(domElement)}`);
let nthChild = 0;
for(const childNode of node.childNodes){
if(childNode.tagName && !childNode["visited"]){
// console.log(childNode.tagName);
if(childNode.tagName && !childNode["visited"]){
if (childNode.tagName.toLowerCase() == "script"){
childNode["visited"] = true;
}else{
// console.log(node["nthChild"]);
domElement[name]["childNodes"].push(iterateDomElements(childNode, domElement[name]["path"], id+1, id+1, ++nthChild));
}
}
@ -96,8 +85,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
function setParsedDomKeys(node, domElement, name, id, parentId){
const coordinates = node.getBoundingClientRect();
// console.log(coordinates["x"]);
// console.log(coordinates["y"]);
domElement[name]["attributes"] = findElementAttributes(node);
domElement[name]["cssProps"] = findAppliedCSSOnElement(node);
domElement[name]["found"] = false;
@ -114,7 +101,6 @@ const parseHTMLAndKeepRelations = (selector: string) => {
let uniqueStr = "";
Object.entries(attr).forEach((entry) => {
const [key, value] = entry;
// console.log(`${key}: ${value}`);
uniqueStr += `${key}:${value}*`
});
return uniqueStr;
@ -153,19 +139,13 @@ const parseHTMLAndKeepRelations = (selector: string) => {
export const parseWebPage = async (page: Page, filename: string, selector?: any) => {
console.log('In paseWebPages');
// const type = filename.toLowerCase().includes("baseline") ? "BASELINE" : "CANDIDATE";
// console.log(`\n\n******** PARSING DOM ${type} ********`);
console.log(`\n\n******** PARSING DOM ********`);
const result = await page.evaluate(parseHTMLAndKeepRelations, selector);
// console.log(`result: ${JSON.stringify(result, null, 2)}`);
// console.log(`\n\nHURRAYYY !!!...COMPLETED PARSING ${type}`);
console.log(`filename, selector: ${filename}, ${selector}`);
// if (!fs.existsSync("dist\\snapshots")){
// fs.mkdirSync("dist\\snapshots");
// }
// const compressedResult = compress(result[0]);
compress;
const compressedResult = result[0];
const compressedResult = compress(result[0]);
// compress;
// const compressedResult = result[0];
fs.writeFileSync(filename, JSON.stringify(compressedResult), "utf-8");
fs.writeFileSync(filename, JSON.stringify(compressedResult), "utf-8");
return result[0];

Просмотреть файл

@ -275,7 +275,9 @@ export class PlayWrightExecutor {
path: screenshotPath,
});
console.log(`saving snapshot`);
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt", "") ;
if(this.options.parseDom){
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt", "") ;
}
} catch (err) {
console.error("ERROR: PAGE_SCREENSHOT: ", err.message);
throw err;
@ -292,7 +294,9 @@ export class PlayWrightExecutor {
await element.screenshot({
path: screenshotPath,
});
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt" , selector);
if(this.options.parseDom){
await parseWebPage(this.page, screenshotPath.replace(".png", "") + ".txt" , selector);
}
} else {
console.log("ERROR: Element NOT VISIBLE: CAPTURING PAGE");
await this.makeScreenshot(testName);

Просмотреть файл

@ -6,7 +6,7 @@ export interface StoryWrightOptions {
screenShotDestPath: string;
browsers: Array<string>;
report: string,
domDiffing: Array<string>;
parseDom: boolean;
headless: boolean;
concurrency: number;
skipSteps: boolean;

Просмотреть файл

@ -169,38 +169,4 @@ export class StoryWrightProcessor {
}
}
}
public static async runDomDiffing(options: StoryWrightOptions) {
// console.log(`Starting DOM diffing: ${JSON.stringify(options.domDiffing)} ${JSON.stringify(options.report)}`);
console.log(`Starting DOM diffing:`);
const paths: string[] = options.domDiffing;
let baseLineDOMPath: string = paths[0];
let candidateDOMPath: string = paths[1];
const screenshotsChanged: any[] = JSON.parse(fs.readFileSync(options.report, "utf-8"))["screenshotsChanged"];
console.log(`baseLineDOMPath, candidateDOMPath, report: ${baseLineDOMPath}, ${candidateDOMPath} ${JSON.stringify(screenshotsChanged)}`);
screenshotsChanged.forEach((screenshot: any) => {
const domCSSFile = screenshot["imageName"].replace(".png", ".json");
console.log(`domCSSFilename: ${domCSSFile}`);
const baseLineDOMCSSsnap = baseLineDOMPath + "//" + domCSSFile;
const candidateDOMCSSsnap = candidateDOMPath + "//" + domCSSFile;
console.log(`baseLineDOMCSSsnap, candidateDOMCSSsnap: ${baseLineDOMCSSsnap}, ${candidateDOMCSSsnap}`);
// console.log(compareDoms);
let baselineDom = JSON.parse(fs.readFileSync(baseLineDOMCSSsnap, "utf-8"));
let candidateDom = JSON.parse(fs.readFileSync(candidateDOMCSSsnap, "utf-8"));
console.log(`baselineDom, candidateDom: ${baselineDom["html"]["uniqueId"]}`);
console.log(`baselineDom, candidateDom: ${candidateDom["html"]["uniqueId"]}`);
// compareDoms(baselineDom, candidateDom);
fs.writeFileSync(`C:/Users/vinodsharma/Documents/workspace/1JS/ooui/packages/visual-regression-tests/dist/result/${domCSSFile.replace("json", "")}_baseline.json`, JSON.stringify(baselineDom, null, 2));
fs.writeFileSync(`C:/Users/vinodsharma/Documents/workspace/1JS/ooui/packages/visual-regression-tests/dist/result/${domCSSFile.replace("json", "")}_candidate.json`, JSON.stringify(candidateDom, null, 2));
});
}
}

Просмотреть файл

@ -36,16 +36,13 @@ const args = argv
},
choices: [BrowserName.Chromium, BrowserName.Firefox, BrowserName.Webkit],
})
.option("domDiffing", {
alias: "domDiffing",
default: ["baselinePath"],
.option("paseDom", {
alias: "parseDom",
default: false,
describe:
"Run Dom Diffing tool against changed screenshots",
"Parse DOM/CSS information of page and store it in a file.",
nargs: 1,
type: "array",
coerce: (array) => {
return array.flatMap((v) => v.split(","));
},
type: "boolean"
})
.option("report", {
alias: "report",
@ -129,7 +126,7 @@ const storyWrightOptions: StoryWrightOptions = {
url: url,
screenShotDestPath: args.destpath,
browsers: args.browsers,
domDiffing: args.domDiffing,
parseDom: args.parseDom,
report: args.report,
headless: args.headless,
concurrency: args.concurrency,
@ -138,9 +135,4 @@ const storyWrightOptions: StoryWrightOptions = {
totalPartitions: args.totalPartitions,
waitTimeScreenshot: args.waitTimeScreenshot
};
// StoryWrightProcessor.process(storyWrightOptions);
if(storyWrightOptions["domDiffing"].length >= 2){
StoryWrightProcessor.runDomDiffing(storyWrightOptions);
}else{
StoryWrightProcessor.process(storyWrightOptions);
}
StoryWrightProcessor.process(storyWrightOptions);