Селен и Раздел 508

Frames

In a perfect world, we wouldn’t need frames at all, but in this fallen one, they are sometimes useful. They should always have titles describing their contents:

  <tr>
    <td>verifyXpathCount</td>
    <td>//frame[not(normalize-space(@title))]</td>
    <td>0</td>
  </tr>

Image maps

Server-side image maps are rarely used nowadays and for good reason: they make it far more difficult for the user to determine whether or not they are in the right area of the image (the principle of least surprise applies here). They should not be used at all in Section-508-compliant websites unless equivalent text links are provided (which pretty much obviates the image map in the first place).

The test for them, however, is simple enough:

  <tr>
    <td>verifyXpathCount</td>
    <td>//img[ancestor::a and @ismap]</td>
    <td>0</td>
  </tr>
  <tr>
    <td>verifyXpathCount</td>
    <td>//input[normalize-space(@type)='image' and @ismap]</td>
    <td>0</td>
  </tr>

Alt attributes (round 2)

As we said above, the requirement for alt attributes on image tags comes with an exception: where an image alt description would be redundant, use «alt=»». The sort of image envisioned here might, for example, depict a paginating arrow. Even for such images, the alt attribute can be useful unless there is already equivalent text right next to the image. (Of course, if there is such text already, why are you using the image? Use a link instead!)

For the latter case, the solution is necessarily more complex. Selenium cannot be expected to read your mind: you must know what you expect your page to look like. However, it is not difficult to determine whether it does in fact look like what you expect.

We will implement our first Selenium extension to test for this. The Selenium IDE allows you to define a set of extensions in a JavaScript file. By convention, this is called «user-extensions.js», but it can be called anything you like. More than one file can be applied if desired, enabling modularization if it is appropriate for your situation. Apply the files you want using «Options->Selenium Core Extensions» in the «Options» menu in the Selenium IDE.

Our extension, doStoreXPathInfo, is shown below. Selenium will ignore the «do» part of the function name; the command will appear in the Selenium IDE as «storeXPathInfo». It takes two arguments: the XPath expression to be evaluated and the variable within which to store the information retrieved about each node selected by the XPath expression. This variable may be used later in the same Selenium test.

The XPath expression may return elements or attributes, and may return a single node or multiple nodes. The information retrieved depends upon the node: for attributes, the value is retrieved; for elements, the inner HTML is retrieved. If none of these has succeeded, the id attribute is retrieved; failing even this, the name attribute of the node is retrieved. None of these guarantees that information is retrieved; if no information is retrieved about a node, the string «no info» is substituted. Multiple retrieved values are comma-separated.

The function deletes older copies of the variable. For convenient comparison, if no nodes are retrieved, the function stores an empty string as the variable value.

Selenium.prototype.doStoreXPathInfo = function(xpath, variableName)
{
  delete storedVars[variableName];
  var bbot = this.browserbot;
  var result = eval_xpath(xpath, bbot.getDocument(), {
    ignoreAttributesWithoutValue: bbot.ignoreAttributesWithoutValue,
    allowNativeXpath: bbot.allowNativeXpath,
    xpathLibrary: bbot.xpathLibrary,
    namespaceResolver: bbot._namespaceResolver
  });
  if (result.length == 0)
  {
    this.doEcho('No nodes were found corresponding to the XPath expression ' + xpath);
    this.doStore('', variableName);
    return;
  }
  var values = '';
  for (var i = 0; i < result.length; ++i)
  {
    if (values)
    {
      values += ',';
    }
    var value = '';
    var attributesToBeTried = new Array('value', 'innerHTML', 'id', 'name');
    for (var j = 0; j < attributesToBeTried.length && ! value; j++)
    {
      value = result[i].wrappedJSObject[attributesToBeTried[j]];
    }
    values += (value ? value : 'no info');
  }
  if (values)
  {
    this.doStore(values, variableName);
  }
  else
  {
    this.doEcho('No information was retrieved to store to the variable ' + variableName);
  }
}

С этим дополнением тест не слишком сложен. Во-первых, не должно быть изображений без
атрибутов alt :

  <tr>
    <td>verifyXpathCount</td>
    <td>//img[not(@alt)]</td>
    <td>0</td>
  </tr>

Во-вторых, вы должны убедиться, что правильные изображения имеют пустые атрибуты alt. Вы
можете просто посчитать количество таких изображений и сравнить с тем, что вы ожидаете:

  <tr>
    <td>verifyXpathCount</td>
    <td>//img[@alt and not(normalize-space(@alt))]</td>
    <td>yourCountHere</td>
  </tr>

Of course, you would have to replace «yourCountHere» with the number of images you expect to have empty alt attributes.

However, as you are a responsible developer, you will want to check the source URLs to ensure that only the correct images have empty alt attributes. You, therefore, will use the new command instead:

  <tr>
    <td>storeXPathInfo</td>
    <td>//img[@alt and not(normalize-space(@alt))]/@src</td>
    <td>noAltImages</td>
  </tr>
  <tr>
    <td>verifyEval</td>
    <td>'${noAltImages}'=='yourValueHere'</td>
    <td>exact:true</td>
  </tr>

Replace «yourValueHere» with the value you expect the page to return, that is, the source URLs of the images without the alt attribute, in document order and comma-separated (don’t add extra spaces!). If you don’t expect to have images without the alt attribute, you may, as noted above, use an empty string (e.g., «‘${noAltImages}’==»»), but better yet is not to use this test at all; the test under Alt attribute (round 1) is quite sufficient.

Selenium.prototype.getFontsInPixelsCount = function()
{
  var errorList = new Array();
  var index = 0;
  var errors = 0;
  var regex = /[0-9]+[ ]*pt|[0-9]+[ ]*px/i;
  var stylesheets = this.browserbot.getDocument().styleSheets;
  var propertiesToBeTested = new Array('font', 'fontSize', 'letterSpacing', 'lineHeight', 'textIndent', 'wordSpacing');
  for (var i = 0; i < stylesheets.length; i++)
  {
    var stylesheet = stylesheets[i];
    if (! stylesheet.disabled && (! stylesheet.href || stylesheet.href.substring(0, 9) != 'chrome://'))
    {
      var rules = this.getAllStyleRules(stylesheet.cssRules);
      for (var j = 0; j < rules.length; j++)
      {
        if (rules[j].type == CSSRule.STYLE_RULE)
        {
          var style = rules[j].style;
          for (var k = 0; k < propertiesToBeTested.length; k++)
          {
            var text = style[propertiesToBeTested[k]];
            if (text && regex.test(text))
            {
              errorList[index++] = (stylesheet.href ? stylesheet.href : 'inline-style') +
                '@' + rules[j].selectorText;
              errors++;
            }
          }
        }
      }
    }
  }
  if (errors)
  {
    var errorStr = '';
    for (var i = 0; i < errorList.length; i++)
    {
      if (errorStr)
      {
        errorStr += ',';
      }
      errorStr += errorList[i];
    }
    this.doEcho('errors: ' + errorStr);
  }
  return errors;
}

Selenium.prototype.getAllStyleRules = function(rules)
{
  var result = new Array();
  var index = 0;
  for (var i = 0; i < rules.length; i++)
  {
    if (rules[i].type == CSSRule.STYLE_RULE)
    {
      result[index++] = rules[i];
    }
    else if (rules[i].type == CSSRule.IMPORT_RULE)
    {
      var inner = this.getAllStyleRules(rules[i].styleSheet.cssRules);
      result = result.concat(inner);
      index = result.length;
    }
  }
  return result;
}

  <tr>
    <td>verifyFontsInPixelsCount</td>
    <td>0</td>
    <td></td>
  </tr>