Браузерный JavaScript и стандарты

Разработчики из Гугла выкатили в онлайн инструмент Sputnik для функционального тестирования браузеров (он и раньше существовал, но только как неофициальное решение). Тесты, а их более пяти тысяч, проверяют, насколько хорошо движок соответствует спецификации ECMA-262, 3rd edition. На данный момент, лучше всех это удается сделать Opera 10.50 — всего 78 ошибок против 463 у аутсайдера IE8.

Так что, если потребуется проверить код на "правильность", стоит обращаться к Опере. Кстати говоря, в свете последних заявлений о ее (его?) быстроте, этот результат показывает, что норвежские разработчики отлично поработали над созданием нового движка Carakan.

Сравните, какая ситуация была полгода назад и ныне.
Новость в блоге Chromium.

Минимизация HTML кода

В полку инструментов веб-программирования прибыло — оптимизатор кода, выполняющий такие операции, как удаление ненужных пробельных символов, различного рода комментариев (в скриптах и в HTML), кавычек в определении атрибутов, устаревших и неиспользуемых/необязательных атрибутов и их значений, и другое.

Скажу я вам, серьезный даже слишком жесткий оптимизатор вышел. Он пока в активной разработке, на него не стоит серьезно полагаться.

Собственно, сам инструмент располагается здесь: HTML Minifier.

Но, если верить статье по оптимизации JS, "сжатие JavaScript-файлов даст нам всего лишь 5-7% уменьшение размера относительно обычного gzip, который можно использовать везде". Так что, стоит ли овчинка выделки...

[Javascript, Watir] Функциональное тестирование

Моя оконная реализация — отличный полигон для знакомства с различными техниками программирования. В этой статье я хочу рассказать про функциональное тестирование. Оно мне пригодится в свете того, что я собираюсь сделать. Я хочу быть уверенным, что мои изменения не будут вести к регрессии (к появлению ошибок в отлаженных участках кода). О плюсах тестирования вы и сами знаете — с ним лучше, чем без.

Хочу заострить ваше внимание, что буду проводить не модульное (юнит-) тестирование, а функциональное. Согласно википедии, таким образом проверяются функции приложения, а не отдельных его модулей.

Средство для тестирования я выбрал нестандартное — не Selenium, а Watir. Кстати, есть еще Sahi, но с ним разберусь в следующий раз (сравнительная таблица). Я остановился на Watir, потому что он мне нравится :) Во-первых, в качестве скриптового языка используется Ruby (классный язык), во-вторых, с ним проще начать работать, чем с Selenium (не въехал я в него).

Установка Watir. Проследуйте по ссылке с инструкциями. Вам надо поставить Руби (лучше всего версии 1.8), а потом и нужные пакеты через gem install watir.

Теперь давайте проверим Watir в работе на простом примере. Напишем тест, смысл которого открыть поиск гугла и найти статьи этого блога.

require 'rubygems'
require 'watir'   # the controller
require 'test/unit' 

class TC_test_suite < Test::Unit::TestCase

 def test_ask_google_for_codeblogz
  puts 'Init browser'
  b = Watir::Browser.new

  puts 'Go to Google Search'
  b.goto("http://www.google.com")

  puts 'Put search query'
  b.text_field(:name, "q").set "watir site:codeblogz.ru"
  
  puts 'Click button to start searching'
  b.button(:name, "btnG").click

  puts 'Check whether codeblogz has post about Watir'
  assert(b.text.include?("www.codeblogz.ru") )
  
  puts 'End of test'
 end
end

Запустите в консоли, и смотрите на "представление" :)

Теперь мне нужно описать тесты, которые будут проверять работоспособность моей оконной реализации. Напомню, какой функционал предоставляет мое решение:

• Перемещение окна
• Изменение размеров
• Сворачивание в низ страницы

Открывать браузер, искать поля ввода — это не сложно. Теперь давайте разберемся, как управлять мышой, как "таскать" и "ресайзить" наши веб-окна. Тут без активного интерактива не обойтись, поэтому надо воспользоваться одной dll-кой, которую нужно зарегистрировать в системе. Для Windows это делается через regsvr32 C:\ruby\lib\ruby\gems\1.8\gems\watir-1.6.5\watir\AutoItX3.dll. И нам открываются новые возможности :) А именно: можно имитировать перемещение курсора, нажатие и удерживание левой кнопки и др.

Но, чтобы таскать окошки, нужно знать их координаты. Координаты можно вычислять через свойства элементов. Без лишней демагогии, привожу код тест-кейса.

require 'rubygems'
require 'watir'   # the controller
require 'test/unit' 
require 'win32ole'

class TC_test_suite < Test::Unit::TestCase

 def test_move_window
  puts 'Init browser'
  b = Watir::IE.attach(:title , /pss_window functional test/)
  b.bring_to_front
  b.maximize

  puts "Find window with title 'Library capabilities'"

  d = b.div(:xpath, "//div[text() = 'Library capabilities']")
  top = d.attribute_value("offsetTop")
  left = d.attribute_value("offsetLeft")
  height = d.attribute_value("clientHeight")
  width = d.attribute_value("clientWidth")

  y = 110 + top + height / 2
  x = 10 + left + width / 2
  puts x, y 
  
  puts "Start mouse manipulations"
  a = WIN32OLE.new("AutoItX3.Control")
  a.mousemove(x,y)
  a.mousedown
  
  a.mousemove(x+50, y+50)
  a.mousemove(x+150, y+50)
  a.mousemove(x+150, y+250)
  a.mouseup
  puts "End"
 end
end

Этот тест имеет множество недостатков:

• не работает, если окно браузера закрыто (я пока не разобрался, как заставить IE открывать локальные файлы без подтверждения);
• не определяет реальные координаты элемента (необходимо реализовать цикл);
• да и вообще, проверяет работу только одной функции - перемещения
• слишком простой, и мало чего проверяет — необходимо написать множество тест-кейсов, чтобы можно было перейти к следующему этапу.

Начало положено. Теперь надо подучить Руби и написать более адекватные тесты :) Об этом в следующих статьях.

P.S. Если среди вас есть рубисты, или просто знакомые с Watir — прошу отметиться в комментариях, с какими полезностями вы можете поделиться.

[JavaScript] Окошки в браузере

Закончился конкурс, осталась рабочая реализация. Суть — веб-окошки, которые можно произвольно таскать по странице, изменять их горизонтально-вертикальные размеры, сворачивать и вообще закрывать.
По прошествии некоторого времени, глядя на код и его недостатки (о коих ниже), я понимаю, что мне еще учиться и учиться джаваскрипту! Все-таки это язык гибких возможностей, и я выбрал не самый удачный способ реализации.

Но на ошибках учатся, без этого никак.

Исходный код можно найти на гитхабе, в открытом доступе: github.com/severality/pss_vk_windows
Поиграться с конкурсным решением можно здесь: js.codeblogz.ru/windows/index.htm

Текущий релиз будет именоваться гордым 0.1a. То есть вы понимаете, что до полноценного Один-Ноль пока далековато и стремиться к таковому быстро я не обещаю.

Планы:

• изменить архитектуру: сейчас окна строятся по принципу лэйаутов в Java и Qt. Я ставил на гибкость и универсальность. Но зачем это нужно, если в проекте нужен набор из трех окошек. Окна однотипные и со статичными данными. Нет нужды каждый раз при загрузке генерировать окна, если можно просто описать их через язык разметки html (для этого он собственно и нужен) и вешать на них соответствующие обработчики;
• реализовать все на манер ненавязчивого js, чтобы при неработающем у клиента js выводилась рабочая оконная структура;
• уйти от использования проприетарных common.js и rustyle.css
• избавиться от багов :)

На этом все. Обсуждение кода приветствуется, прошу в комментарии.

Итоги конкурса

Вот и результаты конкурса объявили. Я не вошел в призеры. Это огорчает. Думаю, меня сгубила привычка делать все универсально и основательно, хотя можно было победить с работой, которая делает не больше не меньше сказанного, с массой упрощений. Ну и ладно :) Перевернется и на нашей улице грузовик с блекджеком и шлюхами... Ага.

Если кому интересно (отметьтесь в комментариях), могу выложить в образовательных целях пару статеек того, как проектировать такие работы. По себе знаю, что познавать какую-то область лучше на практических примерах.

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

А впереди следующий конкурс — виджеты для Оперы. Может там что получится добиться :)