We’ll often need to access the same DOM elements multiple times in one test. Your first instinct might be to use cy.getand assign the result to a variable for reuse. This might appear to work fine at first, but can lead to trouble. Everything in Cypr…

Cypress provides a straightforward API that allows you to define custom commands. In this lesson, we’ll take a series of Cypress commands and wrap them up in a single custom command so we can easily repeat these steps in multiple specs. We have this…

Change is good, but creating from scratch is even better. This lesson shows you how to create DOM elements from D3 and insert them into your document as needed. You’ll officially be on your way to creating data visualizations! d3.select('.title') .in…

1.JavaScript 添加DOM Element 执行效率比较: 抄自:http://wildbit.com/blog/2006/11/21/javascript-optimization-adding-dom-elements-to-document JavaScript optimization: Adding DOM elements to document Scenario: you're developing rich Web application and you need to…

Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This lesson will show you the ins and outs of accessing existing DOM elements with D3. var div = d3.select('div'); console.log(div.nodes()); var divLinks…

Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing colors, labels, or even link destinations, this lesson demonstrates the process and patterns for updating the DOM using D3’s powerful APIs. // you will s…

一.ReactDOM 1.1 render() ReactDOM.render(element,container,[callback]) 在container中渲染一个React元素,然后返回组件一个引用(对于stateless组件,返回null).如果React元素已经加入到了container中,再次执行上面的方法会执行更新操作,只在必要时更新DOM来反映最新的React元素.如果提供可选的回调函数,则该callback会在组件渲染或者更新完后执行. 注意: ReactDOM.render…

Integration tests let us keep our tests fast and reliable. They also allow us to test scenarios that are hard to recreate in a full end-to-end setup. That being said, we should round out our test suite with some high-level smoke tests. In this lesson…

In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div>container and explore some options available. DOC…

React based applications often use controlled inputs, meaning the input event leads to the application code setting the value of the very input we’re typing into. Since this moves the input setting behavior into the application code, we should have a…