Tips for Test Automation

README.md

Minimum browser compatibility

• IE >= 11

Desired Capabilities

• Windows
• OS X
• iOS
• Android

JavaScript Tips

getElement(s)ByX

getElementByXpath

function getElementByXpath(xpath) {
  return document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

getElementByXpath("//a")

getElementsByXpath

function getElementsByXpath(xpath) {
  const nodes = []
  const nodesSnapshot = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
  for (var i=0; i < nodesSnapshot.snapshotLength; i+= 1) {
      nodes[nodes.length] = nodesSnapshot.snapshotItem(i)
  }
  
  return nodes
}

getElementsByXpath("//a")

getElementsByText

function getElementsByText(text){
    const filter = {
        acceptNode: function(node){
            // look for nodes that are text_nodes and include the following string.
            if(node.nodeType === document.TEXT_NODE && node.nodeValue.includes(text)){
                 return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_REJECT;
        }
    }
    const nodes = [];
    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, filter, false);
    while(walker.nextNode()){
       //give me the element containing the node
       nodes[nodes.length] = walker.currentNode.parentNode
    }
    return nodes;
}

getElementsByText('Text')

ref: https://stackoverflow.com/questions/37098405/javascript-queryselector-find-div-by-innertext

Xpath

Generate abosulte XPath

function absoluteXPath(element) {
  var comp, comps = [];
  var xpath = '';
  var getPos = function (element) {
    var position = 1, curNode;
    if (element.nodeType === Node.ATTRIBUTE_NODE) {
      return null;
    }
    for (curNode = element.previousSibling; curNode; curNode = curNode.previousSibling) {
      if (curNode.nodeName === element.nodeName) {
        ++position;
      }
    }
    return position;
  }

  if (element instanceof Document) {
    return '/';
  }

  for (; element && !(element instanceof Document); element = element.nodeType === Node.ATTRIBUTE_NODE ? element.ownerElement : element.parentNode) {
    comp = comps[comps.length] = {};
    switch (element.nodeType) {
      case Node.TEXT_NODE:
        comp.name = 'text()';
        break;
      case Node.ATTRIBUTE_NODE:
        comp.name = '@' + element.nodeName;
        break;
      case Node.PROCESSING_INSTRUCTION_NODE:
        comp.name = 'processing-instruction()';
        break;
      case Node.COMMENT_NODE:
        comp.name = 'comment()';
        break;
      case Node.ELEMENT_NODE:
        comp.name = element.nodeName;
        break;
    }
    comp.position = getPos(element);
  }

  for (var i = comps.length - 1; i >= 0; i--) {
    comp = comps[i];
    xpath += '/' + comp.name.toLowerCase();
    if (comp.position !== null) {
      xpath += '[' + comp.position + ']';
    }
  }

  return xpath;
}

Misc

スクリーンショット

• PC

  • screen.width == screen.availWidth
  • screen.height == screen.availHeight
  • window.innerWidth　- スクロールバーも含まれる
  • window.innerHeight - PC ではブックマックバーを除いたもの

• iPhone

  • iPhone のスクリーンショットにはナビゲーションが含まれてちょっと面倒。
  • screen.width == screen.availWidth - デバイス全体
  • screen.height == screen.availHeight
  • window.innerWidth
  • window.innerHeight - Safari の上下のナビゲーションは含まれない

• https://kapeli.com/cheat_sheets/iOS_Design.docset/Contents/Resources/Documents/index

• https://www.npmjs.com/package/ios-inner-height

Element Offset

Get document-relative position by adding viewport scroll to viewport-relative gBCR

const elem = document.querySelector(<target>)
const rect = elem.getBoundingClientRect()
const win  = elem.ownerDocument.defaultView

{
  "x": rect.x + win.pageXOffset,
  "y": rect.x + win.pageYOffset,
}

Browser compatibility:

TODO

Acknowledgement:

• https://github.com/jquery/jquery/blob/master/src/offset.js#L94-L100