How to use createElm method in Playwright Internal

Best JavaScript code snippet using playwright-internal

transaction.js

Source:transaction.js Github

copy

Full Screen

...10 /​/​ create table display11 var attr_tr_next = {12 'data-id' : tr_id13 };14 var tr_next = Spr.createElm("tr","odd gradeX show-transaction-detail", "", attr_tr_next);15 var td_parent = Spr.createElm("td","", "", "");16 td_parent.setAttribute('colspan',"12");17 18 var table = Spr.createElm("table","table table-striped table-hover", "", "");19 var thead = Spr.createElm("thead","", "", "");20 table.appendChild(thead);21 var tr_thead = Spr.createElm("tr","warning", "", "");22 thead.appendChild(tr_thead);23 /​/​ Tao header24 var attr = {25 'style':"font-weight:bold"26 };27 var td_thead = Spr.createElm("td","", "", attr);28 var text = Spr.createTextNode("Product Code");29 td_thead.appendChild(text);30 tr_thead.appendChild(td_thead);31 var attr = {32 'style':"font-weight:bold"33 };34 var td_thead = Spr.createElm("td","", "", attr);35 var text = Spr.createTextNode("Product Name");36 td_thead.appendChild(text);37 tr_thead.appendChild(td_thead);38 var attr = {39 'style':"font-weight:bold"40 };41 var td_thead = Spr.createElm("td","", "", attr);42 var text = Spr.createTextNode("Product Image");43 td_thead.appendChild(text);44 tr_thead.appendChild(td_thead);45 var td_thead = Spr.createElm("td","", "", attr);46 var text = Spr.createTextNode("Order On Amazon");47 td_thead.appendChild(text);48 tr_thead.appendChild(td_thead);49 var td_thead = Spr.createElm("td","", "", attr);50 var text = Spr.createTextNode("Quantity");51 td_thead.appendChild(text);52 tr_thead.appendChild(td_thead);53 var td_thead = Spr.createElm("td","", "", attr);54 var text = Spr.createTextNode("Price Product");55 td_thead.appendChild(text);56 tr_thead.appendChild(td_thead);57 var td_thead = Spr.createElm("td","", "", attr);58 var text = Spr.createTextNode("Discount");59 td_thead.appendChild(text);60 tr_thead.appendChild(td_thead);61 var td_thead = Spr.createElm("td","", "", attr);62 var text = Spr.createTextNode("Total Price");63 td_thead.appendChild(text);64 tr_thead.appendChild(td_thead);65 /​/​ Tao Body66 var tbody = Spr.createElm("tbody","", "", "");67 var data = data.response;68 var total_price = 0;69 var total_product = 0;70 var total_discount = 0;71 for(var obj in data){72 total_product ++;73 /​/​ du lieu dung chung 74 var price = data[obj].price;75 var discount = data[obj].price_save;76 var quantity = data[obj].quantity;77 /​/​==================================================78 var tr = Spr.createElm("tr","odd gradeX", "", "");79 tbody.appendChild(tr);80 /​/​ Create td Product Code .81 var td = Spr.createElm("td","product-code", "", "");82 var attr = {83 'target' : "_blank",84 'href' : '' + window.location.origin +'/​dp?code='+ data[obj].product_code + '',85 };86 var a = Spr.createElm('a',"","",attr);87 var text = Spr.createTextNode(data[obj].product_code);88 a.appendChild(text);89 td.appendChild(a);90 tr.appendChild(td);91 /​/​ End create td Product Code92 /​/​ Create td product name93 var td = Spr.createElm("td","name-product", "", "");94 var text = Spr.createTextNode(data[obj].name);95 td.appendChild(text);96 tr.appendChild(td);97 /​/​ End create td product name98 /​/​ create td image product99 var td = Spr.createElm("td","name-product", "", attr);100 var attr = {101 'src' : data[obj].img,102 'style' : "width:96px;height:72px",103 };104 var img = Spr.createElm("img","", "", attr); 105 td.appendChild(img);106 tr.appendChild(td);107 /​/​ end create td image product108 /​/​ Create td Order Product on Amazon109 var td = Spr.createElm("td","product-amazon", "", "");110 var attr = {111 'target' : "_blank",112 'href' : 'https:/​/​www.amazon.co.jp/​dp/​'+ data[obj].product_code + '',113 };114 var a = Spr.createElm('a',"","",attr);115 var text = Spr.createTextNode('View on Amazon');116 a.appendChild(text);117 td.appendChild(a);118 tr.appendChild(td);119 /​/​ End td Order Product on Amazon120 /​/​ Create td quantity Product121 var td = Spr.createElm("td","quantity-product", "", attr);122 var text = Spr.createTextNode(data[obj].quantity);123 td.appendChild(text);124 tr.appendChild(td); 125 /​/​ End create td quantity Product126 /​/​ Create td price Product 127 var td = Spr.createElm("td","price-product", "", "");128 var span = Spr.createElm("span","font-red", "","");129 var sup = Spr.createElm("sup","", "", "");130 var text_sup = Spr.createTextNode(" đ ");131 var text_span = Spr.createTextNode(Helper.formatNumber(Math.floor(price * exchange_rate), 0));132 sup.appendChild(text_sup);133 span.appendChild(text_span);134 span.appendChild(sup);135 td.appendChild(span);136 tr.appendChild(td);137 138 /​/​ End create td price Product 139 /​/​ Create td discount Product 140 var td = Spr.createElm("td","discount", "", "");141 var span = Spr.createElm("span","font-red", "","");142 var sup = Spr.createElm("sup","", "", "");143 var text_sup = Spr.createTextNode(" đ ");144 var text_span = Spr.createTextNode(Helper.formatNumber(Math.floor(discount * exchange_rate), 0));145 sup.appendChild(text_sup);146 span.appendChild(text_span);147 span.appendChild(sup);148 td.appendChild(span);149 tr.appendChild(td);150 151 /​/​ End create td discount Product 152 /​/​ Create td Total price Product 153 var td = Spr.createElm("td","total-price", "", "");154 var span = Spr.createElm("span","font-red", "","");155 var sup = Spr.createElm("sup","", "", "");156 var text_sup = Spr.createTextNode(" đ ");157 var text_span = Spr.createTextNode(Helper.formatNumber(Math.floor(price * exchange_rate * quantity), 0));158 sup.appendChild(text_sup);159 span.appendChild(text_span);160 span.appendChild(sup);161 td.appendChild(span);162 tr.appendChild(td);163 164 /​/​ End create td discount Product in japan165 /​/​ Caculator Total166 total_price += (Math.floor(price * exchange_rate * quantity));167 }168 var tr = Spr.createElm("tr","odd gradeX warning", "", "");169 tbody.appendChild(tr);170 var attr = {171 'style':"font-weight:bold"172 };173 var td_total = Spr.createElm("td","total", "", attr);174 td_total.setAttribute('colspan','7');175 var text = Spr.createTextNode('Total :');176 td_total.appendChild(text);177 var td_value = Spr.createElm("td","total", "", ""); 178 var span = Spr.createElm("span","font-red", "","");179 var sup = Spr.createElm("sup","", "", "");180 var text_sup = Spr.createTextNode(" đ ");181 var text_span = Spr.createTextNode(Helper.formatNumber(total_price, 0));182 sup.appendChild(text_sup);183 span.appendChild(text_span);184 span.appendChild(sup);185 td_value.appendChild(span);186 var td_first = Spr.createElm("td","", "", ""); 187 tr.appendChild(td_total);188 tr.appendChild(td_value); 189 table.appendChild(tbody);190 td_parent.appendChild(table);191 tr_next.appendChild(td_first);192 tr_next.appendChild(td_parent);193 $(tr_next).insertAfter(tr_current);194 }195 }196 var callback_get_data_info = function(data){197 if(data.meta.success){198 $('#transaction-code').text(data.response.code);199 $('#transaction-created-at').text(Spr.format_date(data.response.created_at));200 if(isNaN(data.response.expected_day)==false){...

Full Screen

Full Screen

quizView.js

Source:quizView.js Github

copy

Full Screen

...81 createButton = (content) => {82 const $msg = document.createElement("button");83 $msg.setAttribute("class", CLS_QUIZ_BOT_BUTTON);84 $msg.innerHTML = content;85 const $inner = this.createElm(CLS_QUIZ_BOT_BUTTON_INNER_BOX);86 const $outer = this.createElm(CLS_QUIZ_BOT_BUTTON_OUTER_BOX);87 $inner.appendChild($msg);88 $outer.appendChild($inner);89 return $outer90 }9192 deleteAllButtons = () => {93 const $btns = document.getElementsByClassName(CLS_QUIZ_BOT_BUTTON_OUTER_BOX);94 for(let $btn of $btns){95 $btn.remove();96 }97 }9899 createUserNameBox = (userName) => {100 const $name = this.createElm(CLS_QUIZ_BOT_BOT_NAME);101 $name.innerHTML = userName;102 const $inner = this.createElm(CLS_QUIZ_BOT_BOT_NAME_INNER_BOX);103 /​/​const $outer = this.createElm(CLS_QUIZ_BOT_BOT_NAME_OUTER_BOX);104 $inner.appendChild($name);105 /​/​$outer.appendChild($inner); 106 return $inner;107 }108109 createBotNameBox = (botName) => {110 const $name = this.createElm(CLS_QUIZ_BOT_BOT_NAME);111 $name.innerHTML = botName;112 const $inner = this.createElm(CLS_QUIZ_BOT_BOT_NAME_INNER_BOX);113 /​/​const $outer = this.createElm(CLS_QUIZ_BOT_BOT_NAME_OUTER_BOX);114 $inner.appendChild($name);115 /​/​$outer.appendChild($inner);116 return $inner;117118 }119120 createInnerBox = () => {121 return this.createElm(CLS_QUIZ_BOT_INNER_BOX);122 }123124 createBotMessage = (msgName, type, subtype, content, botName, putbuttonHere) => {125 const $msg = this.createElm(CLS_QUIZ_BOT_BOT_MESSAGE);126 $msg.setAttribute("id", msgName);127 128 if(type == "one-way-message" && subtype == "link"){129 $msg.innerHTML = this.findMatchMessage(content); 130 } else {131 $msg.innerHTML = content;132 }133 134 const $inner = this.createElm(CLS_QUIZ_BOT_BOT_MESSAGE_INNER_BOX);135 const $outer = this.createElm(CLS_QUIZ_BOT_BOT_MESSAGE_OUTER_BOX);136 const $nameBox = this.createBotNameBox(botName);137 $inner.appendChild($msg);138 $inner.appendChild($nameBox);139 $outer.appendChild($inner);140141 if(putbuttonHere){142 const $btn = this.createButton("Next");143 this.bindButton($btn);144 $outer.appendChild($btn);145 }146 this.$root.appendChild($outer);147 }148 149 createOptions = ($box, name, subtype, options, disabledOptions) => {150 let type;151 if(subtype == "radio") type = "radio";152 else if (subtype == "checkbox") type = "checkbox";153 else console.error("error in createOptions - unsupported type:", subtype);154155 for(let key in options){156 let $option = document.createElement("input");157 let id = name + "@" + key;158 $option.setAttribute("type", type);159 $option.setAttribute("value", key);160 $option.setAttribute("id", id);161 $option.setAttribute("name", name);162 if( key in disabledOptions){163 $option.disabled = true;164 }165 $option.innerHTML = options[key];166 let $wrapper = document.createElement("div");167 $wrapper.appendChild($option)168 let $label = document.createElement("label")169 $label.setAttribute("for", id);170 $label.innerHTML = options[key];171 $wrapper.appendChild($label)172 $box.appendChild($wrapper);173 }174 }175 176 createUserMessage = (msgName, type, subtype, options, disabledOptions, numRetries, userName, putbuttonHere) => {177 let $msg = this.createElm(CLS_QUIZ_BOT_USER_MESSAGE);178 if(type == "multiple-choice") {179 this.createOptions($msg, msgName + numRetries, subtype, options, disabledOptions);180 }181 const $inner = this.createElm(CLS_QUIZ_BOT_USER_MESSAGE_INNER_BOX);182 const $outer = this.createElm(CLS_QUIZ_BOT_USER_MESSAGE_OUTER_BOX);183 const $nameBox = this.createUserNameBox(userName);184 $inner.appendChild($msg);185 $inner.appendChild($nameBox);186 $outer.appendChild($inner);187 if(putbuttonHere) {188 const $btn = this.createButton("Submit");189 this.bindButtonWithOptions($btn, msgName + numRetries);190 $outer.appendChild($btn);191 }192 this.$root.appendChild($outer);193 }194195196 /​/​https:/​/​javascript.info/​regexp-groups197 findMatchMessage = (text) => {198 const regex = /​(?<msg>\[.+?\])(?<address>\(.+?\))/​; /​/​ something like [Let's go to the next lesson](http:/​/​someaddress)199 const match = text.match(regex).groups; 200 return match.msg.substring(1,match.msg.length - 1)201 }202 findMatchAddress = (text) => {203 const regex = /​(?<msg>\[.+?\])(?<address>\(.+?\))/​; /​/​ something like [Let's go to the next lesson](http:/​/​someaddress)204 const match = text.match(regex).groups;205 return match.address.substring(1,match.address.length - 1)206 }207 createButtonOnlyUserMessage = (subtype, text) => {208 const $msg = document.createElement("button");209 $msg.setAttribute("class", CLS_QUIZ_BOT_BUTTON);210 if (subtype == "link") {211 $msg.innerHTML = "Next";212 this.bindButtonWithLink($msg, this.findMatchAddress(text));213 } else {214 $msg.innerHTML = "Next";215 this.bindButton($msg);216 }217218 const $inner = this.createElm(CLS_QUIZ_BOT_BUTTON_INNER_BOX);219 const $outer = this.createElm(CLS_QUIZ_BOT_BUTTON_OUTER_BOX);220 const $wrapper = this.createElm(CLS_QUIZ_BOT_USER_MESSAGE_OUTER_BOX);221 $inner.appendChild($msg);222 $outer.appendChild($inner);223 $wrapper.appendChild($outer)224 this.$root.appendChild($wrapper);225 }226227 createHint = (wrongToHints) => {228 console.log(wrongToHints)229 const $msg = this.createElm(CLS_QUIZ_BOT_HINT);230 let text = [];231 for(let key in wrongToHints){232 text.push(wrongToHints[key]);233 }234 console.log(text.join(' '));235 $msg.innerHTML = text.join(' ');236 const $inner = this.createElm(CLS_QUIZ_BOT_HINT_INNER_BOX);237 const $outer = this.createElm(CLS_QUIZ_BOT_HINT_OUTER_BOX);238 $inner.appendChild($msg);239 $outer.appendChild($inner);240 this.$root.appendChild($outer);241 }242243 installBot = ($dom) => {244 $dom.appendChild(this.createInnerBox());245 this.$root = $dom.lastChild;246 }247248 /​**249 * 250 * @param {PayloadFromMachine} payload 251 */​ ...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1function createElm(tag, objectCl) {2 const elem = document.createElement(tag);3 for (const key of Object.keys(objectCl)) {4 elem[key] = objectCl[key];5 }6 return elem;7}8function topSections(userData) {9 const headerSec = headerSection(userData);10 container.append(headerSec);11}12function bottomSection(postData, users) {13 console.log("bottom section users", users);14 const feedSec = feedSection(postData, users);15 const createPost = createPostSection(feedSec);16 mainSection.append(createPost, feedSec);17 container.append(mainSection);18}19function userProfile(userData, wrapperEl) {20 const chipEl = createElm("div", { className: "chip" });21 const avatarEl = createElm("div", { className: "avatar-small" });22 const imgEl = createElm("img", {23 src: userData.avatar,24 alt: userData.username,25 });26 const spanEl = createElm("span", { innerText: userData.username });27 avatarEl.append(imgEl);28 chipEl.append(avatarEl, spanEl);29 wrapperEl.append(chipEl);30 return wrapperEl;31}32function headerSection(userData) {33 const headerEl = createElm("header", { className: "main-header" });34 const wrapperEl = createElm("wrapper", { className: "wrapper" });35 for (const user of userData) {36 userProfile(user, wrapperEl);37 }38 headerEl.append(wrapperEl);39 return headerEl;40}41function createPostSection(postAdd) {42 const postSection = createElm("section", {43 className: "create-post-section",44 });45 const formEl = createElm("form", {46 id: "create-post-form",47 autocomplete: "off",48 });49 const h2El = createElm("h2", { innerText: "Create a post" });50 const labelElImage = createElm("label", { for: "image", innerText: "Image" });51 const inputImage = createElm("input", {52 id: "image",53 name: "image",54 type: "text",55 });56 const labelElTitle = createElm("label", { for: "title", innerText: "Title" });57 const inputTitle = createElm("input", {58 id: "title",59 name: "title",60 type: "text",61 });62 const labelElContent = createElm("label", {63 for: "content",64 innerText: "Content",65 });66 const textAreaEL = createElm("textarea", {67 id: "content",68 name: "content",69 rows: "2",70 columns: "30",71 });72 const divEl = createElm("div", { className: "acttion-btns" });73 const buttonPreview = createElm("button", {74 id: "preview-btn",75 type: "button",76 innerText: "Preview",77 });78 const buttonSubmit = createElm("button", {79 type: "submit",80 innerText: "Post",81 });82 formEl.addEventListener("submit", function (event) {83 event.preventDefault();84 const post = {85 title: inputTitle.value,86 image: inputImage.value,87 content: textAreaEL.value,88 };89 fetch("http:/​/​localhost:3000/​posts", {90 method: "POST",91 headers: {92 "Content-Type": "application/​json",93 },94 body: JSON.stringify(post),95 })96 .then(function (response) {97 return response.json();98 })99 .then(function (newPost) {100 userPosts(newPost, postAdd);101 });102 formEl.reset();103 });104 divEl.append(buttonPreview, buttonSubmit);105 formEl.append(106 h2El,107 labelElImage,108 inputImage,109 labelElTitle,110 inputTitle,111 labelElContent,112 textAreaEL,113 divEl114 );115 postSection.append(formEl);116 return postSection;117}118function userPosts(post, ulEl, postUser) {119 const liEl = createElm("li", { className: "post" });120 const chipEl = createElm("div", { className: "chip" });121 const avatarEl = createElm("div", { className: "avatar-small" });122 const imgEl = createElm("img", {123 src: postUser.avatar,124 alt: postUser.username,125 });126 const spanEl = createElm("span", { innerText: postUser.username });127 const postImageEl = createElm("div", { className: "post--image" });128 const imagePostEl = createElm("img", {129 src: post.image.src,130 alt: "undefined",131 width: 288,132 });133 const postContent = createElm("div", { className: "post--content" });134 const h2El = createElm("h2", { innerText: post.title });135 const pEl = createElm("p", {136 innerText: post.content,137 });138 const commentsEl = createElm("div", { className: "post--comments" });139 const h3El = createElm("h3", { innerText: "Comments" });140 const formEl = createElm("form", {141 id: "create-comment-form",142 autocomplete: "off",143 });144 const labelEl = createElm("label", {145 for: "comment",146 innerText: "Add Comment",147 });148 const inputEl = createElm("input", {149 id: "comment",150 name: "comment",151 type: "text",152 });153 const buttonSubmit = createElm("button", {154 type: "submit",155 innerText: "Comment",156 });157 const postComment = createElm("div", { className: "post--comment" });158 for (const comment of post.comments) {159 commentsSec(comment, commentsEl);160 }161 formEl.append(labelEl, inputEl, buttonSubmit);162 postImageEl.append(imagePostEl);163 commentsEl.append(h3El, formEl);164 postContent.append(h2El, pEl);165 avatarEl.append(imgEl);166 chipEl.append(avatarEl, spanEl);167 liEl.append(chipEl, postImageEl, postContent, commentsEl);168 ulEl.append(liEl);169}170function commentsSec(comment, commentsEl) {171 const avatarSmall = createElm("div", { className: "avatar-small" });172 const smallImgEl = createElm("img", {173 src: comment.userId,174 alt: "Van Gogh",175 });176 const postComment = createElm("div", { className: "post--comment" });177 const pEl2 = createElm("p", { innerText: comment.content });178 avatarSmall.append(smallImgEl);179 postComment.append(avatarSmall, pEl2);180 commentsEl.append(postComment);181}182function feedSection(postData, users) {183 console.log("feed section users", users);184 const sectionEl = createElm("section", { className: "feed" });185 const ulEl = createElm("ul", { className: "stack" });186 for (const post of postData) {187 let postUser = users.find(function (user) {188 return user.id === post.userId;189 });190 console.log("After find user", postUser);191 userPosts(post, ulEl, postUser);192 }193 sectionEl.append(ulEl);194 return sectionEl;195}196function getUser() {197 let users = {};198 fetch("http:/​/​localhost:3000/​users")199 .then(function (response) {200 return response.json();201 })202 .then(function (data) {203 users = data;204 fetch("http:/​/​localhost:3000/​posts")205 .then(function (response) {206 return response.json();207 })208 .then(function (userPosts) {209 topSections(users);210 bottomSection(userPosts, users);211 console.log("After fetch", users);212 });213 });214}215/​/​ function getPost() {216/​/​ fetch("http:/​/​localhost:3000/​posts")217/​/​ .then(function (response) {218/​/​ return response.json();219/​/​ })220/​/​ .then(function (userPosts) {221/​/​ bottomSection(userPosts);222/​/​ });223/​/​ }224getUser();225/​/​ getPost();226const container = document.querySelector("#root");...

Full Screen

Full Screen

toast.js

Source:toast.js Github

copy

Full Screen

...26 _this.showBtns();27 _this.showSelector();28 };29 _this.showBtns = function () {30 const toastButtons = createElm("div");31 toastButtons.addClass("toast-buttons");32 const successBtn = createBtn("success", "Success");33 const dangerBtn = createBtn("danger", "Danger");34 const infoBtn = createBtn("info", "Info");35 const warningBtn = createBtn("warning", "Warning");36 toastButtons.appendChild(successBtn);37 toastButtons.appendChild(dangerBtn);38 toastButtons.appendChild(infoBtn);39 toastButtons.appendChild(warningBtn);40 appendChild(".controlPanel", toastButtons);41 successBtn.addEventListener("click", () => addToastOnClick("success"));42 dangerBtn.addEventListener("click", () => addToastOnClick("danger"));43 infoBtn.addEventListener("click", () => addToastOnClick("info"));44 warningBtn.addEventListener("click", () => addToastOnClick("warning"));45 };46 _this.showSelector = function () {47 const selector = createElm("div");48 selector.addClass("select");49 const select = createElm("select");50 select.addClass("position-select");51 const defOption = createOpt("Select Position");52 const topRightOption = createOpt("Top Right", "top-right");53 const topLeftOption = createOpt("Top Left", "top-left");54 const bottomLeftOption = createOpt("Bottom Left", "bottom-left");55 const bottomRightOption = createOpt("Bottom Right", "bottom-right");56 select.appendChild(defOption);57 select.appendChild(topRightOption);58 select.appendChild(topLeftOption);59 select.appendChild(bottomLeftOption);60 select.appendChild(bottomRightOption);61 selector.appendChild(select);62 appendChild(".controlPanel", selector);63 };64 _this.createContainers = function () {65 const controlPanel = createElm("div");66 controlPanel.addClass("controlPanel");67 const topRightCont = createCont("top-right");68 const bottomRightCont = createCont("bottom-right");69 const topLeftCont = createCont("top-left");70 const bottomLefttCont = createCont("bottom-left");71 appendChild(options.rootElement, controlPanel);72 appendChild(options.rootElement, topRightCont);73 appendChild(options.rootElement, bottomRightCont);74 appendChild(options.rootElement, topLeftCont);75 appendChild(options.rootElement, bottomLefttCont);76 };77 _this.showToast = function (78 position = options.position,79 variant = options.variant80 ) {81 const notificationToast = createElm("div");82 notificationToast.addClass("notification toast " + variant);83 deleteToast(notificationToast, options.autoHideDuration);84 const notificationImage = createElm("div");85 notificationImage.addClass("notification-image");86 const toastImage = document.createElement("img");87 toastImage.src = "assets/​" + images[variant];88 const notTitleMessage = createElm("div");89 notTitleMessage.addClass("notification-message-title");90 const notificationTitle = createElm("p");91 notificationTitle.addClass("notification-title");92 notificationTitle.textContent = options.title;93 const notificationMessage = createElm("p");94 notificationMessage.textContent = options.content;95 notificationMessage.addClass("notification-message");96 const closeBtn = createElm("button");97 closeBtn.innerHTML = "X";98 closeBtn.addEventListener("click", function () {99 if (options.closeOnClick) notificationToast.style.display = "none";100 });101 notTitleMessage.appendChild(notificationTitle);102 notTitleMessage.appendChild(notificationMessage);103 notificationImage.appendChild(toastImage);104 notificationToast.appendChild(notificationImage);105 notificationToast.appendChild(notTitleMessage);106 notificationToast.appendChild(closeBtn);107 appendChild(".notification-container." + position, notificationToast);108 };109 _this.prepareControls();110}111/​/​ Functions /​/​112Object.prototype.addClass = function (className) {113 this.setAttribute("class", className);114};115const createElm = (tag) => document.createElement(tag);116const createBtn = (className, content) => {117 const btn = createElm("button");118 btn.addClass(className);119 btn.innerHTML = content;120 return btn;121};122const createOpt = (content, value = "bottom-right") => {123 const option = createElm("option");124 option.innerHTML = content;125 option.value = value;126 return option;127};128const createCont = (posClass) => {129 const notificationContainer = createElm("div");130 notificationContainer.addClass("notification-container " + posClass);131 return notificationContainer;132};133const deleteToast = (element, time) => {134 setTimeout(() => (element.style.display = "none"), time);135};136const appendChild = (root, child) =>...

Full Screen

Full Screen

tetris.js

Source:tetris.js Github

copy

Full Screen

1/​/​ Tetris(俄罗斯方块)ç±»2function Tetris(css,x,y,shape) { 3 /​/​ 创建4个div用来组合出各种方块4 var myCss = css?css:"c";5 this.divs = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)]6 /​/​ 疑问1：这个if存在的作用？7 /​/​ 没有shape说明没有是第一次创建8 if(!shape){9 /​/​ 预告区域的方块10 this.divs2 = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)]11 /​/​ 分数区域12 this.score = createElm("div","g");13 this.score.style.top = 10*size+"px";14 this.score.style.left = (col+1)*size+"px";15 this.score.style.backgroundColor = "rgb(0,0,0)"16 this.score.innerHTML = "score：0";17 }18 19 this.container = null;20 /​/​ 对x、y、shape、container进行初始化操作21 this.refresh = function () {22 this.x = (typeof(x)!='undefined')?x:3;23 this.y = (typeof(y)!='undefined')?y:0;24 /​/​ 如果有传参，优先使用参数的，如果有预告，优先使用预告，25 /​/​ 都没有就自己生成26 if (shape) {this.shape = shape;}...

Full Screen

Full Screen

appalert.spec.js

Source:appalert.spec.js Github

copy

Full Screen

...34 return elements;35 };36 37 it('should have a closeAlert function', function() {38 var eles =createElm({});39 expect(elmScope).toBeDefined();40 expect(elmScope.closeAlert).toEqual(jasmine.any(Function));41 });42 43 it('should start with only alert class', function() {44 var eles =createElm({});45 expect(eles.alert.hasClass('alert')).toBe(true);46 expect(eles.alert.hasClass('alert-error')).toBe(false);47 expect(eles.alert.hasClass('alert-success')).toBe(false);48 });49 it('should show success alert', function() {50 var eles =createElm({});51 $scope.$emit('evtAppalertAlert', {type:'success', 'msg':'Success!'});52 $scope.$digest();53 54 expect(eles.alert.hasClass('alert-success')).toBe(true);55 expect(eles.msg.text()).toBe('Success!');56 });57 58 it('should show error alert', function() {59 var eles =createElm({});60 $scope.$emit('evtAppalertAlert', {type:'error', 'msg':'Error'});61 $scope.$digest();62 expect(eles.alert.hasClass('alert-error')).toBe(true);63 expect(eles.alert.hasClass('alert-success')).toBe(false);64 expect(eles.msg.text()).toBe('Error');65 });66 67 it('should show yellow alert by default if no type set', function() {68 var eles =createElm({});69 $scope.$emit('evtAppalertAlert', {'msg':'Default'});70 $scope.$digest();71 expect(eles.alert.hasClass('alert-error')).toBe(false);72 expect(eles.alert.hasClass('alert-success')).toBe(false);73 });74 75 it('should close alert immediately (no delay) by clicking "x" and calling closeAlert', function() {76 var eles =createElm({});77 /​/​show alert first78 $scope.$emit('evtAppalertAlert', {'msg':'Default'});79 $scope.$digest();80 /​/​close alert81 elmScope.closeAlert({});82 $scope.$digest();83 /​/​need timeout otherwise it doesn't work..84 $timeout(function() {85 expect(eles.alert.hasClass('hidden')).toBe(true);86 }, 50);87 });88 89 it('should close alert by emitting event', function() {90 var eles =createElm({});91 /​/​show alert first92 $scope.$emit('evtAppalertAlert', {'msg':'Default'});93 $scope.$digest();94 /​/​close alert95 $scope.$emit('evtAppalertAlert', {'close':true});96 $scope.$digest();97 /​/​need brief timeout to allow it to update (though it should be near immediate)98 $timeout(function() {99 expect(eles.alert.hasClass('hidden')).toBe(true);100 }, 50);101 });102 103 it('should hide alert automatically after given duration', function() {104 var eles =createElm({});105 var delay =750;106 $scope.$emit('evtAppalertAlert', {'msg':'Default', 'delay':delay});107 $scope.$digest();108 109 /​/​show NOT be hidden before time is up /​/​not sure if this is actually working - can't test this since $timeout is mocked for unit tests? it just fires when you run $timeout.flush()? - http:/​/​stackoverflow.com/​questions/​19484940/​how-does-timeout-work-in-angular-tests-running-in-karma110 $timeout(function() {111 expect(eles.alert.hasClass('hidden')).toBe(false);112 }, (delay/​2));113 $timeout.flush(); /​/​need this for the $timeout's to actually run..114 $timeout.flush();115 /​/​SHOULD be hidden after time is up116 $timeout(function() {117 expect(eles.alert.hasClass('hiding')).toBe(true);118 expect(eles.alert.hasClass('hidden')).toBe(true);...

Full Screen

Full Screen

script.js

Source:script.js Github

copy

Full Screen

1let blogItems = document.getElementsByClassName("blog-items")[0];2function createElm(elm) {3 return document.createElement(elm);4}5function getRandomNumber(min, max) {6 return Math.floor(Math.random() * (max - min) + min);7}8function generateRandomGibberishNames(){9 let alphabets = "abcdefghijklmnopqrstuvwxyz";10 let gibberishUsername = "";11 for(let i = 0; i < 6; i++){12 gibberishUsername += alphabets[getRandomNumber(0, 26)];13 }14 return gibberishUsername + getRandomNumber(0,1000);15}16function getFormattedDate(date) {17 const monthNames = [18 "Jan",19 "Feb",20 "Mar",21 "Apr",22 "May",23 "Jun",24 "Jul",25 "Aug",26 "Sep",27 "Oct",28 "Nov",29 "Dec",30 ];31 const d = new Date(date);32 return monthNames[d.getMonth()] + " " + d.getDate();33}34function modifyImagesLink(){35 let gender = ["men", "women"];36 return `https:/​/​randomuser.me/​api/​portraits/​med/​${gender[getRandomNumber(0,2)]}/​${getRandomNumber(0,100)}.jpg`;37}38blogData.forEach(function (blog, index) {39 blogItems.append(createBlogs(blog, index));40});41function createBlogs(blog, index) {42 let parentDiv = createElm("div");43 parentDiv.classList.add("blog-content", "borr-top");44 parentDiv.setAttribute("data-id", index);45 let childDivOne = createElm("div");46 childDivOne.classList.add("flex", "align-ct");47 let figure = createElm("figure");48 let img = createElm("img");49 img.src = modifyImagesLink();50 img.alt = "test";51 figure.append(img);52 let divInner1 = createElm("div");53 divInner1.classList.add("blog-meta");54 let a1 = createElm("a");55 a1.href = "#";56 a1.innerText = generateRandomGibberishNames();57 let time = createElm("time");58 time.innerText = getFormattedDate(blog.createdAt);59 time.setAttribute("datetime", blog.createdAt);60 divInner1.append(a1, time);61 childDivOne.append(figure, divInner1);62 let childDivTwo = createElm("div");63 childDivTwo.classList.add("blog-details");64 let a2 = createElm("a");65 a2.href = "#";66 let h2 = createElm("h2");67 h2.innerText = blog.title;68 a2.append(h2);69 let divInner2 = createElm("div");70 divInner2.classList.add("hashtag");71 for (let i = 0; i < blog.tags.length; i++) {72 let a = createElm("a");73 a.href = "#";74 a.innerText = "#" + blog.tags[i];75 divInner2.append(a);76 }77 let divInner3 = createElm("div");78 divInner3.classList.add("blog-feedback", "flex", "justify-sb");79 let divInner4 = createElm("div");80 divInner4.classList.add("col-1-2");81 if (blog.feedback.hearts > 0) {82 let a3 = createElm("a");83 a3.href = "#";84 let i1 = createElm("i");85 i1.classList.add("far", "fa-heart");86 a3.innerText = blog.feedback.hearts + " reactions";87 a3.prepend(i1);88 divInner4.append(a3);89 }90 let a4 = createElm("a");91 a4.href = "#";92 let i2 = createElm("i");93 i2.classList.add("far", "fa-comments");94 a4.innerText = (blog.feedback.comments > 0 ? (blog.feedback.comments + " comments") : "Add Comment");95 a4.prepend(i2);96 divInner4.append(a4);97/​/​ divInner4.append(a3, a4);98 let divInner5 = createElm("div");99 divInner5.classList.add("col-2-2");100 let span = createElm("span");101 span.innerText = blog.readTime + " min read";102 let a5 = createElm("a");103 a5.classList.add("save-btn");104 a5.href = "#";105 a5.innerText = "Save";106 divInner5.append(span, a5);107 divInner3.append(divInner4, divInner5);108 childDivTwo.append(a2, divInner2, divInner3);109 parentDiv.append(childDivOne, childDivTwo);110 return parentDiv;...

Full Screen

Full Screen

small-jsx.js

Source:small-jsx.js Github

copy

Full Screen

...54 /​/​ } else55 /​/​ console.warn(`${attr} is not a valid property of a <${type}>`);56 });57}58function createElm(tagName, textOrPropsOrChild, ...otherChildren) {59 const elm = document.createElement(tagName);60 updateELm(elm, textOrPropsOrChild)61 if (otherChildren) appendArray(elm, otherChildren);62 return elm;63}64const a = (...args) => createElm(`a`, ...args);65const button = (...args) => createElm(`button`, ...args);66const div = (...args) => createElm(`div`, ...args);67const h1 = (...args) => createElm(`h1`, ...args);68const header = (...args) => createElm(`header`, ...args);69const p = (...args) => createElm(`p`, ...args);70const span = (...args) => createElm(`span`, ...args);71const img = (...args) => createElm(`img`, ...args);72const i = (...args) => createElm(`i`, ...args);73const nav = (...args) => createElm(`nav`, ...args);74const ul = (...args) => createElm(`ul`, ...args);75const li = (...args) => createElm(`li`, ...args);76const input = (...args) => createElm(`input`, ...args);77const footer = (...args) => createElm(`footer`, ...args);78const h3 = (...args) => createElm(`h3`, ...args);79const aside = (...args) => createElm(`aside`, ...args);...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const elm = await page.createElm({7 properties: {8 }9 });10 await page.screenshot({ path: `example.png` });11 await browser.close();12})();13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 const elm = await page.createElm({19 properties: {20 }21 });22 await page.screenshot({ path: `example.png` });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 const elm = await page.createElm({31 properties: {32 }33 });34 await page.screenshot({ path: `example.png` });35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch();40 const context = await browser.newContext();41 const page = await context.newPage();42 const elm = await page.createElm({43 properties: {44 }45 });46 await page.screenshot({ path: `example.png` });47 await browser.close();48})();49const { chromium } = require('playwright');50(async () => {51 const browser = await chromium.launch();52 const context = await browser.newContext();53 const page = await context.newPage();54 const elm = await page.createElm({55 properties: {56 }57 });58 await page.screenshot({ path: `example.png` });59 await browser.close();60})();61const { chromium } = require('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({headless:false});4 const page = await browser.newPage();5 const element = await page.$('input[name="q"]');6 await element.evaluate(element => element.value = 'Playwright');7 await page.screenshot({ path: 'example.png' });8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch({headless:false});13 const page = await browser.newPage();14 const element = await page.$('input[name="q"]');15 await element.evaluate(element => element.value = 'Playwright');16 await page.screenshot({ path: 'example.png' });17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch({headless:false});22 const page = await browser.newPage();23 const element = await page.$('input[name="q"]');24 await element.evaluate(element => element.value = 'Playwright');25 await page.screenshot({ path: 'example.png' });26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch({headless:false});31 const page = await browser.newPage();32 const element = await page.$('input[name="q"]');33 await element.evaluate(element => element.value = 'Playwright');34 await page.screenshot({ path: 'example.png' });35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch({headless:false});40 const page = await browser.newPage();41 const element = await page.$('input[name="q"]');42 await element.evaluate(element => element.value = 'Playwright');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createElm } = require('playwright/​lib/​server/​dom');2const { createTestServer } = require('playwright/​test');3const { chromium } = require('playwright');4(async () => {5 const server = await createTestServer();6 server.setRoute('/​test.html', (req, res) => {7 res.end(`8 window.onload = () => {9 const div = document.createElement('div');10 div.innerHTML = 'Hello World';11 document.body.appendChild(div);12 }13 `);14 });15 const browser = await chromium.launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 await page.goto(server.PREFIX + '/​test.html');19 const divHandle = await page.evaluateHandle(() => document.querySelector('div'));20 const div = createElm(divHandle);21 console.log(await div.textContent());22 await browser.close();23})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createElm } = require('playwright/​lib/​server/​dom.js');2const { JSHandle } = require('playwright/​lib/​server/​frames.js');3const { chromium } = require('playwright');4(async () => {5 const browser = await chromium.launch();6 const context = await browser.newContext();7 const page = await context.newPage();8 const elmHandle = await createElm(page, 'div', {9 style: 'color: blue;',10 });11 const elm = await elmHandle.evaluateHandle((e) => e);12 await page.evaluateHandle((e) => document.body.appendChild(e), elm);13 await page.screenshot({ path: `example.png` });14 await browser.close();15})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createElm } = require("@playwright/​test");2const elm = createElm("div", { id: "mydiv" });3const { createElm } = require("@playwright/​test");4const elm = createElm("div", { id: "mydiv" });5import { createElm } from "@playwright/​test";6const elm = createElm("div", { id: "mydiv" });7import { createElm } from "@playwright/​test";8const elm = createElm("div", { id: "mydiv" });9import { createElm } from "@playwright/​test";10const elm = createElm("div", { id: "mydiv" });11import { createElm } from "@playwright/​test";12const elm = createElm("div", { id: "mydiv" });13const { createElm } = require("@playwright/​test");14const elm = createElm("div", { id: "mydiv" });15const { createElm } = require("@playwright/​test");16const elm = createElm("div", { id: "mydiv" });17const { createElm } = require("@playwright/​test");18const elm = createElm("div", { id: "mydiv" });19const { createElm } = require("@playwright/​test");20const elm = createElm("div", { id: "mydiv" });

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {createElm} = require('playwright');2const {getTestState} = require('playwright/​test');3const {test} = require('@playwright/​test');4const {expect} = require('@playwright/​test');5test.describe('', () => {6 test.beforeEach(async ({page}) => {7 });8 test('createElm', async ({page}) => {9 const elm = await createElm(page, {name: 'input', attributes: {name: 'q'}, text: 'hello'});10 await elm.fill('hello');11 await elm.press('Enter');12 const url = await page.url();13 });14});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createElm } = require('playwright/​lib/​server/​dom.js');2const { ElementHandle } = require('playwright/​lib/​server/​dom.js');3const element = createElm('div', [], {});4console.log(element);5const handle = new ElementHandle(element);6console.log(handle);7const { createElm } = require('playwright/​lib/​server/​dom.js');8const { ElementHandle } = require('playwright/​lib/​server/​dom.js');9const element = createElm('div', [], {});10console.log(element);11const handle = new ElementHandle(element);12console.log(handle);13const { createElm } = require('playwright/​lib/​server/​dom.js');14const { ElementHandle } = require('playwright/​lib/​server/​dom.js');15const element = createElm('div', [], {});16console.log(element);17const handle = new ElementHandle(element);18console.log(handle);19const { createElm } = require('playwright/​lib/​server/​dom.js');20const { ElementHandle } = require('playwright/​lib/​server/​dom.js');21const element = createElm('div', [], {});22console.log(element);23const handle = new ElementHandle(element);24console.log(handle);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createElm } = require('@playwright/​test/​lib/​server/​dom');2const elm = createElm('div', { className: 'my-class' });3console.log(elm.outerHTML);4const { createElm } = require('@playwright/​test/​lib/​server/​dom');5const elm = createElm('div', { className: 'my-class' }, [6 createElm('h1', { text: 'Hello' }),7 createElm('p', { text: 'Welcome to Playwright' }),8]);9console.log(elm.outerHTML);10const { createElm } = require('@playwright/​test/​lib/​server/​dom');11const elm = createElm('div', { className: 'my-class' }, [12 createElm('h1', { text: 'Hello' }),13 createElm('p', { text: 'Welcome to Playwright' }),14]);15console.log(elm.outerHTML);16const { createElm } = require('@playwright/​test/​lib/​server/​dom');17const elm = createElm('div', { className: 'my-class' }, [18 createElm('h1', { text: 'Hello' }),19 createElm('p', { text: 'Welcome to Playwright' }),20]);21console.log(elm.outerHTML);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createElm } = require('@playwright/​test/​lib/​server/​frames');2const { createServer } = require('http-server');3const server = createServer({ root: '.' });4server.listen(8080);5(async () => {6 const { page } = await browser.newContext().newPage();7 const elementHandle = await createElm(page, 'div', { id: 'foo' });8 await elementHandle.fill('bar');9 console.log(await elementHandle.getAttribute('id'));10 await elementHandle.click();11 await page.close();12})();13 document.getElementById('foo').addEventListener('click', () => {14 alert('foo');15 });

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

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

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful