- PVSM.RU - https://www.pvsm.ru -

Тестирование GUI приложений с помощью оптического распознавания текстов

Функциональное тестирование интерфейса (GUI) приложений — задача очень важная, нужная, но не всегда тривиальная. Основной вопрос тут: как сэмулировать работу пользователя? Простого, рядового пользователя, которому придется непосредственно изо дня в день работать с вашим софтом.

Казалось бы, причем здесь распознавание текстов?

Как и чем обычно тестируют и автоматизируют

В общем, тут скучный текст, основанный большей частью на опыте

Обычно отталкиваются от того софта, который надо автоматизировать. Например, для Win приложений можно посмотреть в сторону MSAA и его развития UI Automation. Этот фреймворк неплохо распознает элементы управления и экранный текст посредством API. Web приложения можно «потыкать» Selenium-ом или WatiN-ом и т. п.

Подобные способы не всегда подходят, например когда пользователь работает с приложением через удаленный рабочий стол, или Web приложение «нашпигованно» сторонними контроллами (ActiveX, Java applets и т. п.).

Очень хорошо данная проблематика описана здесь [1], а список софта — здесь [2].

Идея

мы пойдем другим путем ©Маяковский

А что, если сделать снимок экрана, запомнить некоторую область и в качестве проверки распознать текст в этой области. Если в заданной области есть ожидаемый текст, то можно туда кликнуть.

Звучит неплохо, надо пробовать.

И тернистый путь реализации

Для начала необходимо выбрать движок для распознавания текстов или написать его самому. Писать самому — задача нетривиальная, поэтому возьмем что-то готовое и желательно Open Source. Ну что ж, для начала почитаем мануалы [3].

Есть такое чудо под названием Tesseract OCR. И к нему есть API-обертка на .NET! Звучит просто, но не все так просто: фоткаем, распознаем и… ничего — Tesseract не увидел в нашем снимке текста! Если быть точнее, не увидел на куске снимка.

Как сделать снимок прямоугольной области экрана

public static Bitmap GetAreaFromScreen(Rectangle area)
{
	var rect = new Rectangle(area.X, area.Y, area.Width, area.Height);
	var bmp = new Bitmap(rect.Width, rect.Height, PixelFormat.Format24bppRgb);
	using (var g = Graphics.FromImage(bmp))
		g.CopyFromScreen(rect.Left, rect.Top, 0, 0, bmp.Size, CopyPixelOperation.SourceCopy);
	return bmp;
}

Кусок 'плохого' кода, который ничего не распознал

public string RecognizeText(Bitmap source)
{
	try
	{
		using (var page = engine.Process(source, PageSegMode.SingleLine))
		{
			var text = page.GetText();
			var conf = page.GetMeanConfidence();

			threshold = conf;
			return text;
		}

	}
	catch (Exception e)
	{
		Trace.TraceError(e.ToString());
		return "";
	}
}

Покопавшись немного в тонкостях и механизмах распознавания в интернете, я нашел это: stackoverflow.com/questions/9480013/image-processing-to-improve-tesseract-ocr-accuracy [4].

Получается, надо сначала сделать:

1. fix DPI (if needed) 300 DPI is minimum
2. fix text size (e.g. 12 pt should be ok)
3. try to fix text lines (deskew and dewarp text)
4. try to fix illumination of image (e.g. no dark part of image
5. binarize and de-noise image

А уже потом пробовать что-то там распознавать!

Тут нам на помощь пришла библиотека AForge.NET [5]. Она, кстати, Open Source, как и Tesseract.

кусок 'хорошего' кода с магией AForge

public string RecognizeText(Bitmap source)
{
	try
	{
		var seq = new FiltersSequence();
		seq.Add(new ResizeBilinear(source.Width * 2, source.Height * 2));

		seq.Add(new Grayscale(0.2126, 0.7152, 0.0722));
		seq.Add(new OtsuThreshold());
		seq.Add(new Threshold(100));
		temp = seq.Apply(source);

		using (var page = engine.Process(temp, PageSegMode.SingleLine))
		{
			var text = page.GetText();
			var conf = page.GetMeanConfidence();

			threshold = conf;
			return text;
		}

	}
	catch (Exception e)
	{
		Trace.TraceError(e.ToString());
		return "";
	}
}

Поясню по пунктам:

  1. DPI — у скриншота DPI норм, нам хватит;
  2. fix text size — тут зависит от размера шрифта, иногда надо увеличить, иногда сделать потолще или повыше. ResizeBilinear в помощь;
  3. try to fix text lines — тут зависит от точности выделенной области экрана. Выделяем текст прицельно, стараясь не зацепить «артефакты» — ручная работа;
  4. try to fix illumination of image — Grayscale да и все тут!
  5. binarize and de-noise image — бинаризуем и дешумизуем (!) OtsuThreshold и Threshold(100).

Теперь гораздо лучше.

Ядро программки уже готово, осталось совсем чуть-чуть и все будет круто написать приложение с неким подобием тест дизайнера, где можно разметить области экрана и сохранить в некое подобие тест плана. И написать проигрыватель тестов. Делов-то, на 15 минутЗдесь конечно пришлось повозиться, но это тема другой статьи.

В итоге, соединяя все вместе, получился и простенький дизайнер тестов и простенький проигрыватель.

А теперь скриншот из которого ничего непонятно и видео без звука

Это скриншот той части программки, которую я называю Тест дизайнер!

Тестирование GUI приложений с помощью оптического распознавания текстов - 1

А это видео работы программки — записываем простенький тест и запускаем его!

Вот собственно и всё!

Ах да!

Исходники, ТТХ и прочее

Исходники проекта: github.com/skaeff/miranda-tester [6]
Собранная версия с английским и русским словарями: github.com/skaeff/miranda-tester/blob/master/miranda-tester-net40-compiled.7z [7]

Краткое резюме:

  1. Tesseract OCR github.com/tesseract-ocr/tesseract [8] — библиотека оптического распознавания текстов;
  2. AForge.Net www.aforgenet.com [9] — библиотека обработки изображений;
  3. Немного логики, написанной на C#.

И да, для скриншота нажимаем Shift+Esc.

Автор: skaeff

Источник [10]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/c-2/117085

Ссылки в тексте:

[1] здесь: https://en.wikipedia.org/wiki/Graphical_user_interface_testing

[2] здесь: https://en.wikipedia.org/wiki/List_of_GUI_testing_tools

[3] почитаем мануалы: https://ru.wikipedia.org/wiki/Оптическое_распознавание_символов

[4] stackoverflow.com/questions/9480013/image-processing-to-improve-tesseract-ocr-accuracy: http://stackoverflow.com/questions/9480013/image-processing-to-improve-tesseract-ocr-accuracy

[5] библиотека AForge.NET: http://www.aforgenet.com/framework/

[6] github.com/skaeff/miranda-tester: https://github.com/skaeff/miranda-tester

[7] github.com/skaeff/miranda-tester/blob/master/miranda-tester-net40-compiled.7z: https://github.com/skaeff/miranda-tester/blob/master/miranda-tester-net40-compiled.7z

[8] github.com/tesseract-ocr/tesseract: https://github.com/tesseract-ocr/tesseract

[9] www.aforgenet.com: http://www.aforgenet.com/

[10] Источник: https://habrahabr.ru/post/280984/