Saturday, November 7, 2020

Semantic theming - buttons and actions

 In semantic vocabulary the "button" is a wrong term which belongs rather to UI components. Button-like UI component could be presented as tabs, links, etc. There is common quality for all of them: the goal. Which is ACTION

There are PRIMARY actions which serve the main flow with one DEFAULT variation. Default action is emphasized in UI to highlight what would happen if you hit ENTER key or say "Submit", in the scope of current form or document. 

The ALTERNATIVE actions meant to swing the flow from unusual. Often used for closing dialogs or cancel the multi-step flow.

Synonyms and mixing up terms:

PRIMARY often used as a term for default action. In such case the "secondary" is used as a surrogate for primary and "tertiary" as surrogate for alternative.

ALTERNATIVE called a "secondary".

"info", "success", "warning", "danger" - all referring to different specialized flows. Which could be justified if your application has many flow "flavors" and some are common. In usual application there is no need for such generalization as flows actually meant to be limited and clear in understanding. 


  • relation of action types with emotional and branded palette. 
  • CSS properties example with dark/light variations 

Saturday, October 10, 2020

Web Components Selenium test automation

The one of strengths of Web Components is shadow DOM. It allows to insulate the css rules scoping to own content, allows efficient memory use by sharing DOM, etc... But for QA folks it could make a challenge as usual CSS and XPath selectors would not work anymore. There is a way around.

Elements in Shadow DOM are not available via direct CSS or XPath. Instead you could use JS selector via "Copy JS path":

In this case the full selector is

full selector
document.querySelector("#container-a593f6c588 > div > div > div > div > div > shopping-list")
.shadowRoot.querySelector("div.padded > vaadin-combo-box")

which could be shortened to 

trimmed selector

For simplification in styles tables the series of CSS selectors and shadowRoot could be swapped with :shadow-root pseudoselector. CSS handler in this case should convert the string bello to JS above:

pseudo selector :shadow-root
jkp-shop-plans :shadow-root vaadin-combo-box :shadow-root #input :shadow-root #vaadin-text-field-label-0

the "Element locator" css should sniff for ":shadow-root" sub-string and replace with JS sequence above returning JS object. WebDriver has a By.js locator only in JS webdriver implementation. In Java you have to simulate it yourself. Fortunately that is easy via js Executor:

  1. String javascript = "document.querySelector('vaadin-combo-box').shadowRoot.querySelector('#input').shadowRoot.querySelector('#vaadin-text-field-label-0')";  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. WebElement element = (WebElement) jsExecutor.executeScript(javascript); 

Saturday, August 22, 2020

Semantic theming - fonts in typography

The main purpose of typography is to make the consumption of various kind of content ergonomic: first distinctive and recognizable, then easy to read and comprehend.

The kind of content defines the semantic categories for font characteristics set usually reflected in the purpose of content: 

  • reading - text, headers, tips,... - Roboto, SourceSansPro
  • script/code presentation - monospaced
  • initialism  - lone symbol/ mini tags / acronyms - barley
  • iconized - letter in/as icon, badge
  • tag - icon label, tag without background/border
Each category most likely will use own set of typeface, font type and font properties like spacing, size, weight, etc. 

Lets go over each semantic typography category and explore the purpose and applicable properties.

READING - I guess it is self-explanatory. The sentences, paragraphs and pages of text should be easy to read for hours. Besides of font it defines ergonomics for eye and even neck: you do not want your reader to swing eyes and head righ-left while reading the multi line text. The newspaper columns are good samples or solving such problem. I still love the books with 2-column page layout.