Forem: Klaus

9 Extremely Useful HTML Tricks

Klaus — Thu, 12 Dec 2019 16:27:20 +0000

HTML has plenty of practical secrets that might come in handy.

But I do want to make sure that the site is working on Internet Explorer and other browsers.

I use Endtest to create automated tests and execute them on the cross-browser cloud.

Netflix uses the same platform to test their web apps.

It's even listed as a Required Skill for some of their jobs.

Endtest does have some really nice features, such as:
• Cross-browser grid, running on Windows and macOS machines
• Codeless Editor for Automated Tests
• Support for Web Applications
• Support for both native and hybrid Android and iOS apps
• Unlimited Video Recordings for your test runs
• Screenshot Comparison
• Geolocation
• If Statements
• Loops
• Upload files in your tests
• An Endtest API, for easy integration with your CI/CD system
• Advanced Assertions
• Mobile Tests on real mobile devices
• Email testing with Endtest Mailbox

You should check out the docs.

Below are 9 extremely useful HTML tricks.

1. The `<figure>` tag

This can be used to mark up a photo.

The <figure> element can also contain a <figcaption>:

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>

And this is what it would look like:

2. The `<video>` tag

This allows you to embed a media player for video playback.

For example, you can upload your video on AWS S3 and use the <video> tag to embed it on your website.

Using YouTube for that might come off as unprofessional.

And Vimeo doesn't allow you to embed your videos without paying. ☹️

You can specify certain attributes, such as width, height, autoplay, loop, controls, etc.

<video autoplay="" loop="" controls="" width="640" height="480">
<source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
</video>

And this is what it would look like:

You can also embed a live stream using getUserMedia() or WebRTC

3. The `<picture>` tag

This tag helps you display images in a responsive manner, by showing an alternative image version for smaller viewports.

It needs to contain one or more <source> tags and one <img> tag.

The <img> tag will be used only if the viewport doesn't match any of the <source> tags or if the browser does not support it.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

4. The `<progress>` tag

The <progress> tag represents the progress of a task.

The <progress> tag should not be confused with the <meter> tag (which represents a gauge).

<progress value="63" max="100">
</progress>

This is what it looks like:

5. The `<meter>` tag

You can use the meter element to measure data within a given range (a gauge).

This can be achieved with min and max values or with a percentage.

<meter value="2" min="0" max="10">2 out of 10</meter>

<meter value="0.6">60%</meter>

And here they are:

6. The `<map>` tag

The <map> tag is used to define a client-side image-map.

An image-map is an image with clickable areas.

All you have to do is mention the X and Y coordinates in the elements from the <map>.

This means that you create a map of our Solar System and define areas for each planet and take the visitors to a separate page for each planet they click on.

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

7. The contenteditable attribute

This attribute specifies whether the content of an element is editable or not.

<p contenteditable="true">This is an editable paragraph.</p>

8. Input suggestions

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

I hope you don't mind that I didn't add any styling.

I prefer to keep things as vanilla as possible in my examples.

9. The `<noscript>` tag

The content inside the <noscript> element is rendered by the browser only when JavaScript is disabled.

It provides a fallback mechanism for the components that will stop working without JavaScript.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

I think it's really cool that you're looking for HTML tricks, but are you sure your Web Application is working correctly on all browsers and devices?

You can use Endtest to quickly create Automated Tests and execute them on the cross-browser cloud.

You don't even have to code in order to use it.

Seriously, just read the docs.

Best Automated Testing Tools for 2020

Klaus — Wed, 11 Dec 2019 08:42:26 +0000

As developers, we have the responsibility to provide our users with functional applications.

Each year, I explore all the relevant solutions for automated testing and rank them based on a list of requirements.

Disclaimer

I do not discriminate against open source or proprietary technologies.

I do wish all the solutions were free and open source, but one of my requirements is for the solution to include a cross-browser cloud.

Because some of our users are using Safari or Internet Explorer 11.

If you're preparing to type a comment like this:

But did you try that E2E-library-that-only-works-for-Chrome? 🤓

Please stop and check if it fulfils most of the listed requirements.

If it does, please tell us about it in a comment.

I personally don't believe in open source solutions, backed up by huge marketing budgets spent on bashing Selenium.

Requirement	Endtest	BrowserStack	Sauce Labs
Works for Web Applications	✅	✅	✅
Works for Mobile Applications	✅	✅	✅
Solid Documentation	✅	✅	✅
Cloud with browsers on Windows machines	✅	✅	✅
Cloud with browsers on macOS machines	✅	✅	✅
Codeless Technology	✅	🔲	🔲
API	✅	✅	✅
Scheduler	✅	🔲	🔲
Useful Customer Support	✅	🔲	✅
Email Testing	✅	🔲	🔲
Geolocation	✅	✅	✅
Video recording of test executions	✅	✅	✅

1. Endtest

A cloud platform that allows you to create, manage and run Automated Tests for Web Applications and Native Mobile Apps (Android & iOS), without having to write any code.

Lots of nice features, such as:
• Cross-browser grid, running on Windows and macOS machines
• Codeless Editor for Automated Tests
• Support for Web Applications
• Support for both native and hybrid Android and iOS apps
• Video recordings for test executions
• Detailed logs
• Chrome extension to record web tests
• Element Inspector for mobile apps
• Screenshot comparison
• Data-driven testing with CSV files
• Geolocation
• Email, Slack and Webhook notifications
• If Statements and Loops
• Variables and re-usable components
• Support for file uploads in the tests
• An Endtest API, for integration with CI/CD systems
• Advanced Assertions
• Endtest Mailbox, for testing emails
• Self-healing tests

This is what it looks like when you want to execute a test:

And these are the detailed logs from a test execution:

Their Documentation is fantastic. Lots of examples and videos.

I got quick responses from the Endtest Support, which is constantly praised in the reviews I found online.

Netflix uses this platform to test their web apps. It's even listed as a Required Skill for some of their jobs.

Clearly, Endtest is the winner.

2. BrowserStack

BrowserStack is a cloud platform that offers you a list of browsers and mobile devices to execute your Selenium and Appium tests.

Features:
• Cross-browser grid, running on Windows and macOS machines
• Mobile device lab with emulators and real devices
• Video recordings for test executions
• Detailed logs
• Geolocation
• BrowserStack API

The User Interface is definitely intuitive:

The Documentation from BrowserStack is well structured and offers numerous examples.

What I didn't like about it is the amount of effort it takes to make it work.

It doesn't offer any out-of-the-box features.

The Support from BrowserStack could be better. They do not have a chat and it takes a few hours to get a response.

3. Sauce Labs

Sauce Labs is very similar to BrowserStack, also a cloud platform that offers you a list of browsers and mobile devices to execute your Selenium and Appium tests.

With similar features:
• Cross-browser grid, running on Windows and macOS machines
• Mobile device lab with emulators and real devices
• Video recordings for test executions
• Detailed logs
• Geolocation
• Sauce Labs API

This is what it looks like:

It's difficult to navigate through the Documentation from Sauce Labs.

You have to spend some time digging around.

For example, let's say you want to execute your Appium tests on their mobile devices.

The ID for each device is required, but you won't find any place that contains the list of devices and their IDs.

Their API feels a bit incomplete.

I was surprised to find out that you can't upload the latest build for your mobile app with the API, you have to do it manually through the User Interface.

That's a shame, because both Endtest and BrowserStack offer that functionality.

Our experience with their Customer Support was pleasant.

9 Extremely Powerful JavaScript Hacks

Klaus — Mon, 09 Dec 2019 11:10:13 +0000

I like to optimize.

But users don't care about my optimized code if the site isn't working in their Internet Explorer 11 browser.

I use Endtest to create automated tests and execute them on the cross-browser cloud.

Netflix uses the same platform to test their web apps.

It's even listed as a Required Skill for some of their jobs.

You should check out the docs.

Below are 9 extremely powerful JavaScript hacks.

1. Replace All

We know that the string.replace() function replaces only the first occurrence.
You can replace all the occurrences by adding /g at the end of the regex.

var example = "potato potato";
console.log(example.replace(/pot/, "tom")); 
// "tomato potato"
console.log(example.replace(/pot/g, "tom")); 
// "tomato tomato"

2. Extract Unique Values

We can create a new array only with the unique values by using the Set object and the Spread operator.

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

3. Convert number to string

We just have to use the concatenation operator with an empty set of quotation marks.

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number); 
// string

4. Convert string to number

All we need is the + operator.

Be careful with this one since it only works with 'string numbers'.

the_string = "123";
console.log(+the_string);
// 123

the_string = "hello";
console.log(+the_string);
// NaN

5. Shuffle elements from array

Every day I'm shufflin'

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

6. Flatten multidimensional array

Simply by using the Spread operator.

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries); 
// [1, 2, 5, 6, 7, 9]

7. Short Circuit Conditionals

Let's take this example:

if (available) {
    addToCart();
}

And shorten it by simply using the variable together with the function:

available && addToCart()

8. Dynamic Property Names

I always thought that I first had to declare an object before being able to assign a dynamic property.

const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item); 
// { name: "Coke", flavour: "Cherry" }

9. Use length to resize/empty an array

We basically overwrite the length of the array.

If we want to resize the array:

var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]

If we want to empty the array:

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
console.log(entries.length); 
// 0 
console.log(entries); 
// []

I think it's really cool that you're looking for JavaScript hacks, but are you sure your Web Application is working correctly on all browsers and devices?

You can use Endtest to quickly create Automated Tests and execute them on the cross-browser cloud.

You don't even have to code in order to use it.

Seriously, just read the docs.

Cover photo by Laurie

Selenium Cheat Sheet

Klaus — Tue, 03 Dec 2019 16:22:27 +0000

Selenium is a framework for testing web applications.

Below is my cheat sheet for Selenium.

I'm using Python 🐍, but the concepts are the same for the rest of the languages.

I use Endtest to quickly create Automated Tests and execute them on the cross-browser cloud.

You should check out the docs.

1. Import the Selenium library

You can get Selenium from here.

from selenium import webdriver

2. Start the webdriver and the browser

Starting the webdriver and the Chrome browser.

You can get ChromeDriver from here.

chromedriver = "C:/tests/chromedriver.exe"
driver = webdriver.Chrome(executable_path = chromedriver)

Starting the webdriver and the Firefox browser.

You can get GeckoDriver from here.

geckodriver = "C:/tests/geckodriver.exe"
driver = webdriver.Firefox(executable_path = geckodriver)

Starting the webdriver and the Internet Explorer browser.

You can get IEDriverServer from here.

iedriver = "C:/tests/IEDriverServer.exe"
driver = webdriver.Firefox(executable_path = iedriver)

Starting the webdriver and the Safari browser.

Nothing to download. The SafariDriver is integrated in Safari.

driver = webdriver.Safari()

Instead of having machines with all those browsers, I just use Endtest.

It's a platform for Codeless Automated Testing where you can create, manage and execute tests on real browsers on Windows and macOS machines and mobile devices.

3. Open a website

the_url = "https://example.com"
driver.get(the_url)

4. Find an element

Let's try to find this element:

<a href="/sign-up" id="register" name="register" class="cta nav-link">Sign Up</a>

Find element by ID

the_id = 'register'
element = driver.find_element_by_id(the_id)

Find element by Name

the_name = 'register'
element = driver.find_element_by_id(the_name)

Find element by Class Name

the_class_name = 'nav-link'
element = driver.find_element_by_class_name(the_class_name)

Find element by Tag Name

the_tag_name = 'a'
element = driver.find_element_by_tag_name(the_tag_name)

Find element by Link Text

Works only for anchor elements.

the_link_text = 'Sign Up'
element = driver.find_element_by_link_text(the_link_text)

Find element by Partial Link Text

Works only for anchor elements.

the_partial_link_text = 'Sign'
element = driver.find_element_by_partial_link_text(the_partial_link_text)

Find element by CSS Selector

You can extract the CSS Selector from the browser.

Or you can write your own by using an attribute from the element:

*[attribute="attribute_value"]

For our element, a custom CSS Selector would be:

a[href="/sign-up"]

the_css_selector = 'a[href="/sign-up"]'
element = driver.find_element_by_css_selector(the_css_selector)

Find element by XPath

You can extract the XPath from the browser.

Or you can write your own by using an attribute from the element:

//*[@attribute = "attribute_value"]

For our element, a custom XPath would be:

//a[@href = "/sign-up"]

You can read more about that here.

the_xpath = '//a[@href = "/sign-up"]'
element = driver.find_element_by_xpath(the_xpath)

5. Click on an element

the_id = 'register'
element = driver.find_element_by_id(the_id)
element.click()

6. Write text inside an element

Works only for inputs and textareas.

the_id = 'email'
the_email = 'klaus@werner.de'
element = driver.find_element_by_id(the_id)
element.send_keys(the_email)

7. Select an option

Works only for select elements.

<select id="country">
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="MX">Mexico</option>
</select>

Let's select Canada. 🇨🇦

You can use the visible text:

the_id = 'country'
element = driver.find_element_by_id(the_id)
select_element = Select(element)
select_element.select_by_visible_text('Canada')

You can use the value:

the_id = 'country'
element = driver.find_element_by_id(the_id)
select_element = Select(element)
select_element.select_by_value('CA')

You can also use the index:

the_id = 'country'
element = driver.find_element_by_id(the_id)
select_element = Select(element)
select_element.select_by_index(1)

8. Take a screenshot

the_path = 'C:/tests/screenshots/1.png'
driver.save_screenshot(the_path)

Selenium does not offer Screenshot Comparison but we know who does.

9. Upload a file

This works by using the send_keys method to write the local path of the file in the input type="file" element.

Let's use this example:

<input type="file" multiple="" id="upload_button">

the_file_path = 'C:/tests/files/example.pdf'
the_id = 'upload_button'
element = driver.find_element_by_id(the_id)
element.send_keys(the_file_path)

You can read more about uploading files in a test here.

10. Execute JavaScript

In some cases, you might need to execute some JavaScript code.

This works exactly like you would execute it in your browser console.

js_code = 'document.getElementById("pop-up").remove()'
driver = execute_script(js_code)

11. Switch to iframe

<iframe id="payment_section">
   <input id="card_number">
   <input id="card_name">
   <input id="expiration_date">
   <input id="cvv">
</iframe>

the_iframe_id = 'payment_section'
the_element_id = 'card_number'
the_iframe = driver.find_element_by_id(the_iframe_id)
driver.switch_to.frame(the_iframe)
element = driver.find_element_by_id(the_element_id)
element.send_keys('41111111111111')
driver.switch_to.default_content()

Endtest also supports iframes and it even supports Shadow DOM.

12. Switch to the next tab

You have to store the handle of your current tab in a global variable.

If you have only one tab open, the handle is 0.

global nextTab
global currentTab
nextTab = currentTab + 1
driver.switch_to_window(driver.window_handles[nextTab])
currentTab = currentTab + 1

13. Switch to the previous tab

global previousTab
global currentTab
previousTab = currentTab - 1
driver.switch_to_window(driver.window_handles[previousTab])
currentTab = currentTab - 1

14. Close tab

driver.close()

15. Close alert

driver.switch_to.alert.accept()

16. Refresh

driver.refresh()

17. Hover

the_id = "register"
the_element = driver.find_element_by_id(the_id)
hover = ActionChains(driver).move_to_element(the_element)
hover.perform()

18. Right Click

the_id = "register"
the_element = driver.find_element_by_id(the_id)
right_click = ActionChains(driver).context_click(the_element)
right_click.perform()

19. Click with offset

In order to precisely click on a certain position in a canvas element, you have to provide the offset.

The offset represents the number of pixels to the right and down, starting from the top left corner of your canvas element.

the_id = "register"
the_element = driver.find_element_by_id(the_id)
x = 30
y = 20
offset = ActionChains(driver).move_to_element_with_offset(the_element,x,y)
offset.click()
offset.perform()

You can read how to do this with Endtest here.

20. Press Key

the_id = 'register'
element = driver.find_element_by_id(the_id)
element.send_keys(Keys.RETURN)

21. Drag and drop

element_to_drag_id = 'ball'
target_element_id = 'goal'
element_to_drag = driver.find_element_by_id(element_to_drag_id)
target_element = driver.find_element_by_id(target_element_id)
ActionChains(driver).drag_and_drop(element_to_drag_id, target_element).perform()

22. Get Page Source

the_page_source = driver.page_source

23. Get Cookies

cookies_list = driver.get_cookies()

24. Delete Cookies

cookie_item = 'shopping_cart'
# delete one cookie
driver.delete_cookie(cookie_item)
# delete all cookies
driver.delete_all_cookies()

25. Get first element from list

the_id = 'register'
list_of_elements = driver.find_elements_by_id(the_id)
first_element = list_of_elements[0]

26. Configure Page Load Timeout

driver.set_page_load_timeout(20)

27. Configure Element Load Timeout

from selenium.webdriver.support.ui import WebDriverWait

the_id = 'register'
WebDriverWait(driver,10).until(EC.presence_of_element_located((By.ID, the_id)))

28. Set window size

driver.set_window_size(1600, 1200)

29. Change the user agent string

the_user_agent = 'hello'
chromedriver = 'C:/tests/chromedriver.exe'
options = webdriver.ChromeOptions()
options.add_argument('--user-agent = '+ the_user_agent)
driver = webdriver.Chrome(
   executable_path = chromedriver, 
   chrome_options = options)

30. Simulate webcam and microphone

chromedriver = 'C:/tests/chromedriver.exe'
options = webdriver.ChromeOptions()
options.add_argument("--use-fake-ui-for-media-stream")
options.add_argument("--use-fake-device-for-media-stream")
driver = webdriver.Chrome(
   executable_path = chromedriver, 
   chrome_options = options)

31. Add Chrome Extension

chromedriver = 'C:/tests/chromedriver.exe'
extension_path = 'C:/tests/my_extension.zip'
options = webdriver.ChromeOptions()
options.add_extension(extension_path)
driver = webdriver.Chrome(
   executable_path = chromedriver, 
   chrome_options = options)

32. Emulate mobile device

google_pixel_3_xl_user_agent = 'Mozilla/5.0 (Linux; Android 9.0; Pixel 3 XL Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.98 Mobile Safari/537.36'
pixel_3_xl_emulation = {
   "deviceMetrics": {
      "width": 411, 
      "height": 731, 
      "pixelRatio": 3
   },
   "userAgent": google_pixel_3_xl_user_agent
}
options = webdriver.ChromeOptions()
options.add_experimental_option("mobileEmulation", pixel_3_xl_emulation)
driver = webdriver.Chrome(
   executable_path = chromedriver, 
   chrome_options = options)

I ♥️ Selenium, but I use Endtest instead.

It has so many features, such as:

Chrome extension to record your tests
Access to a cloud with real browsers on Windows and macOS machines
Access to real mobile devices
Detailed logs
Screenshot comparison
Live video of test executions
Video recording of test executions
Data-driven testing with CSV files
Scheduler
Automatic backups
Endtest API
Email notifications
Slack notifications
Webhook notifications
Endtest Mailbox
Different geolocations (🇺🇸🇩🇪🇬🇧🇫🇷🇦🇺🇯🇵)

And the Documentation section is a gold mine. 🤓

The Nastiest Bugs I've Ever Encountered

Klaus — Mon, 02 Dec 2019 14:35:02 +0000

We all know it:

Bugs. Are. Nasty.

I use Endtest to quickly create Automated Tests and execute them on the cross-browser cloud.

You should check out the docs.

Here are the nastiest bugs I've missed and the lessons they taught me:

1. The $0.00 price on all invoices

A few years ago, I was working for this online retail company.

Most of the flows there were automated.

When a user would place an order on the site, the products would be picked up from the warehouse and the invoice would be generated and printed automatically.

The bug crawled from under a change made by a colleague, in a completely different section of the platform.

We only tested around the change and then we released it.

They called us from the warehouse to tell us that all the printed invoices have $0.00 on them.

Surprisingly, no one got fired.

We didn't have automated functional tests back then, we only had unit tests.

I wish I had a tool like Endtest back then.

What lesson did I learn?

Testing around the change is only useful to find out if your change works as expected.

No one can predict how a change might affect other areas of the software.

Never release anything, without executing the regression test suites.

2. The phantom server

Another company: we were working on this functionality that could execute scheduled jobs for the users, pretty much like cron-as-a-service.

The users could pick a time for their scheduled job, we had a cron on our side that would run every minute, picking up the jobs that were scheduled for that specific time and executing them.

  So, we decided to spin up a production clone, to test the release there.  

After the release, users were complaining that their scheduled jobs were being executed twice.  

We spent a few days looking through the entire code, we added patches with extra checks.  

We even modified values from the server configuration!  

Nothing fixed it.

I looked for similar issues on Stack Overflow, until I found an answer from someone saying that maybe it’s coming from a different instance.

“Yeah…right, wish it was that easy!”

 And then it hit me: we forgot to disable the cron on the production clone…and we also forgot to take down the production clone.

What lesson did I learn?

Sometimes, the trees prevent you from seeing the forest.

 That’s why you need a structured approach for testing.

 Make a checklist, write some test cases, but make sure to do it before you actually start testing.

3. The million-dollar input

This other company that I worked for had contracts with all sorts of government agencies, contracts worth billions of dollars.
 
Each delivery phase, obviously, had a deadline.

The penalties for not delivering the software on time were significant.
The company tried to keep things as cheap as possible, with as few employees as possible; this lead to patches being added hours before the UAT sessions.

In case you’re not familiar with the term, User Acceptance Testing (UAT), also known as beta or end-user testing, is defined as testing the software by the user or client to determine whether it can be accepted or not.

These sessions were critical, consisting of guiding a lot of government big shots through the process of checking if the system works.

You had to book these weeks in advance, to find a window in their busy schedule.

If a significant issue was found, they wouldn’t sign the documents and the penalties would be applied.

Of course, we were smart enough to have automated tests and I was the one writing them.

As it was a web application, I just used Selenium and executed them the browsers from my own Windows machine, Internet Explorer included.

 We also had a DevOps guy there, who insisted that the tests should be executed from our Jenkins and run there.

I didn’t even know that was possible, and he mumbled something about a headless Chrome browser on a Linux machine.

A patch was added, one day before the UAT.

We were confident, because the automated tests were checking that area, the full regression didn’t reveal any issues.

First day of the UAT: everyone noticed an issue where a form couldn’t be submitted, due to some broken input.

Our response?

Just clear your browser cache.

Still not working.

Let me check.
Oh, this is bad.

That penalty was close to one million dollars.  

Good news is that the company was prepared for that possibility from the start, so it wasn’t a tragedy.

What lesson did I learn?

Always test in real conditions. Always.

If you’re going to test on a headless browser on some Linux machine, you are taking a risk.

If you are using some cloud solution providing a Chrome browser without telling you which OS it runs on, it’s probably a headless browser on some Linux machine.  

At the company I currently work for, we use Endtest.

It provides real browsers on Windows and macOS machines.
Honestly, it does help me sleep at night.  I wouldn’t know if it’s the right tool for you, but for us it did wonders.

What are the ugliest bugs YOU missed?

I’m looking forward to hearing other stories.

The Best Software Testing Tools

Klaus — Mon, 14 Oct 2019 14:59:48 +0000

Introduction

Most of us neglect testing.

We lower the priority until there's no more time left for it.

And who can blame us? It's hard. It's meticulous.

But it doesn't have to be.

There are libraries and tools out there that make it almost enjoyable.

1. Endtest

Endtest is fun to use.

It reduces the complexity of Automated Testing to the minimum.

You can a create a useful functional test in a few minutes.

And you can do that without even having to code.

2. BrowserStack

BrowserStack is king when it comes to Manual Testing.

You can use it to quickly spin up a machine with any browser you want.

You no longer have to bother the weird guy in your team who uses Windows.

3. Postman

Postman is the best way to test your APIs.

Side note:

Don't you just love their artwork?

Endtest can do that?

Klaus — Wed, 09 Oct 2019 15:36:13 +0000

Introduction

Endtest is the bee's knees when it comes to Automated Testing.

But you might encounter devs who think it's just a Record & Playback tool.

It's amazing that you can do so much with this platform.

1. Test Emails

Endtest Mailbox is a sweet and secure way to get an instant disposable email address.

You can access the inbox for that email address directly on that page by adding the email parameter in the URL.

Dead simple.

2. If Statements and Loops

Your neophobic colleague who hates everything except Linux and Java might dismiss a codeless solution such as Endtest stating that it cannot offer the same flexibility as programming.

Now you know that he's wrong.

3. Execute Tests in Real Browsers on Windows and macOS Machines

There is no greater facepalm then when a dev is shocked to find out that his creation works on his instance of Chromium on Linux and doesn't work on the client's regular Chrome on macOS or Windows.

Sure, Igor might have worked 7 months on designing those tests that run in a headless browser on some container. But that doesn't help anyone.

Everyone in the industry insists that it's a bad practice.

Real users use real browsers, get that in your head.

4. Variables

Either with values defined by you or generated randomly based on your rules and preferences.

They can also be concatenated.

Get them in the autocomplete, similar to how it happens in an IDE:

5. Test PDF Files

I encountered a bug once where all the prices on the invoices were $0.00.

It was scary.

You can view a PDF inside in a browser, that means that you can also test it in the browsers from the Endtest cloud.

6. Inspect Elements in Mobile Apps

Unlike websites, where you can just use the Chrome Developer Tools to inspect any element from the DOM, inspecting elements in Mobile Apps wasn't easy before.

You'd had to fetch the page source and squint in that XML until you found the corresponding tag for your element.

Now, you can use the Element Inspector from Endtest and get the job done.

Works for both Android and iOS, native and hybrid.

7. Notifications on Email and Slack

Wouldn't it be nice if you just got an email when a test failed?

8. Pixel by Pixel Screenshot Comparison

No Element is present assertion can tell you if a section visually matches your expectations, you still need some eyes.

And you have the flexibility to set the Tolerance for that.

9. Video Recording

The video is available as soon as a test execution is finished.
You can even choose to see Live Video during the test execution:

10. Scheduler

You want your tests to run on a schedule.

Use the Endtest API to configure the jobs in Jenkins or just use the built-in Scheduler.

11. Versioning and Backups

Go back in time to any version, nothing ever gets lost.

12. Test File Uploads

Executing Automated Tests on a cross-browser cloud doesn't mean that you can't also upload files in your test.

Store them in the Endtest Drive, fast and secure.

13. Execute SQL Queries

Securely connect to your database and do your SQL magic.

Useful for generating or clearing test data. Or even for assertions.

14. Execute JavaScript

Everyone needs a little bit of JavaScript in their tests from time to time.

15. Browser Logs

Did you ever check the browser logs in an Automated Test?

Really? Never?

Me neither, but I hear that it's a good practice.

At least you always get them in the logs for each test execution.

16. Collaborate

You don't need Git or SVN to grant access to your tests.

Everything is already in the cloud, use the Collaboration module.

17. Multiple Tabs, iframes, Alert Boxes

Check. Check. Check.

18. Complex Gestures on Mobile

Tap it. Zoom it. Swipe it.

The engine for Mobile Tests is powered by Appium and can get the job done.

How to use the Element Inspector for Mobile Apps

Klaus — Mon, 07 Oct 2019 13:58:47 +0000

Introduction

It's a known fact: locating elements in Mobile Applications is a hassle.

Appium and other libraries require locators such as ID, Accessibility ID, Name, Class Name, XPath, etc.

And getting those locators is difficult, because unlike web sites, we can't just Right Click and go into the Chrome Developer Tools.

The old way

A painful process that involves the following steps:

1) Get the Page Source.

2) Look through the tags and find your element.

3) Extract a locator based on the Appium rules.

4) If no reliable locator is found, write the XPath by hand.

The new way, using the Element Inspector

Endtest just added the Get Element Inspector action, which extracts the structure of Android and iOS apps and generates a HTML page like this.

Steps:

1) Add a Get Element Inspector step.

2) The execution will generate a HTML with the structure of the app:

3) Click on an element and you'll get all the locators and attributes.

It works for Android and iOS apps, native and hybrid.

You can read more about it in their docs:
Finding elements in Mobile Applications

How to integrate Endtest with BrowserStack

Klaus — Wed, 25 Sep 2019 14:25:54 +0000

Introduction

Endtest allows you to create, manage and execute Automated Tests, without having to write any code.

By integrating with BrowserStack, you can execute Mobile Tests created with Endtest on a range of real Android and iOS mobile devices offered by BrowserStack.

Getting Started

1) Go to your BrowserStack account.
2) Click on App Automate from the Products section:

3) Click on the Show button from the Username and Access Keys section from the left side of the page:

4) Go to the Settings page from Endtest.
5) Add the Username and Access Key from BrowserStack App Automate in the BrowserStack User and BrowserStack Key inputs from the Endtest Settings page.

6) Click on the Save button.

Nice job! Your Endtest account is now connected with your BrowserStack account.

Running your first test

1) Upload your APK or IPA file in the Drive section from Endtest.

2) After that, go to the Mobile Tests section and click on the Run button.

3) Select BrowserStack from the Grid dropdown.

4) Select the Platform and the Real Device on which you want to execute your test on.

5) Select your APK file in the APK Download URL input.
If you select an iOS device, the APK Download URL input would be replaced with the IPA Download URL input.

After starting the test execution, you will be redirected to the Results section where you'll get live video and all the results, logs and details in real-time.

5 Miraculous Tools for Devs Who Want to Test

Klaus — Wed, 25 Sep 2019 13:14:43 +0000

Testing, as we all know, is what saves us a lot of trouble.
But not everyone is using the same tools or know all of the great ones out there that help make your testing more successful.

Don't fall into the stereotype of the stubborn dev who relies entirely on unit tests. You might regret it, sooner than you think.

1. Endtest

A platform that allows you to create, manage and run Automated Tests for Web Applications and Native Mobile Apps (Android & iOS), without having to write any code.

Some of the features:
• Cross-browser grid, running on Windows and macOS machines
• Codeless Editor for Automated Tests
• Support for Web Applications
• Support for both native and hybrid Android and iOS apps
• Video recordings for test executions
• Detailed logs
• Chrome extension to record web tests
• Element Inspector for mobile apps
• Screenshot comparison
• Data-driven testing with CSV files
• Geolocation
• Email, Slack and Webhook notifications
• If Statements and Loops
• Variables and re-usable components
• Support for file uploads in the tests
• An Endtest API, for integration with CI/CD systems
• Advanced Assertions
• Endtest Mailbox, for testing emails
• Self-healing tests

This is the Codeless Test Editor:

This is what it looks like when you want to execute a test:

And these are the detailed logs from a test execution:

Their Documentation is fantastic. Lots of examples and videos.

You can even run Automated Tests on Real Mobile Devices:

According to their Twitter account, they seem to be adding new features every week:

2. Postman

The easiest way to test any API.

Postman has evolved in the last few years and is now a complete solution for monitoring the health of your APIs.

Some of the features:
• API Client
• Request Chaining
• Data Security
• Traffic Control
• Orchestration
• Logs/Documentation
• API Monitoring
• Monetization

3. Litmus

You can use Litmus to build, test, and monitor emails.

What's interesting for us is the ability to open an email in the multitude of email clients on their side.

Want to know how your email looks in Outlook 2013 or in Apple Mail?

All you have to do is fetch a temporary email address from Litmus and send your email there.

You'll be able to view that in the email clients directly on their site.

Test your emails and you might avoid embarrassing situations like this:

4. Apache JMeter

The best tool to perform load testing and to measure performance.

It was originally designed for testing Web Applications but has since expanded to other test functions.

You can use it to test SOAP, REST, FTP, Database, LDAP, TCP, SMPT, etc.

Other features include:
• Full featured Test IDE
• Ability to load test many different applications/server/protocol types
• A complete and ready to present dynamic HTML report
• Extract data from popular response formats (HTML, JSON , XML, etc)

5. Grabber

A useful web application scanner.
Now you can add Security Testing to your checklist.

Features include:
• Cross-Site Scripting
• SQL Injection
• File Inclusion
• Backup files check
• Simple AJAX check
• Hybrid analysis/Crystal ball testing for PHP application using PHP-SAT
• JavaScript source code analyzer
• JavaScript with JavaScript Lint

Finding Elements in iframes with Selenium

Klaus — Tue, 06 Aug 2019 12:21:58 +0000

Anyone who is using Selenium has encountered a scenario where they have to deal with an iframe.

There is no automatic way of detecting that the element you're looking for is inside an iframe.

The error message only says 'Element not found'.

You're the one who's going to have to look in the Browser Console and figure out that your element is inside an iframe.

Let's create a test for the Stripe Payments Demo which has an iframe.

I'll also be making some comparisons between Selenium and Endtest:

An iframe (inline frame) places another HTML document in a frame.

You need to change the focus of Selenium from one HTML document to another.

In our case, the only element which is inside the iframe is the Card input.

I used Python:

driver.get("https://stripe-payments-demo.appspot.com")

nameElement = driver.find_element_by_name("name")
emailElement = driver.find_element_by_name("email")
addressElement = driver.find_element_by_name("address")
cityElement = driver.find_element_by_name("city")
stateElement = driver.find_element_by_name("state")
zipElement = driver.find_element_by_name("postal_code")
countryElement = driver.find_element_by_name("country")
iframeElement = driver.find_element_by_name("__privateStripeFrame5")
cardElement = driver.find_element_by_name("cardnumber)
submitButton = driver.find_element_by_css_selector("#payment-form > button")

nameElement.send_keys("Klaus Werner")
emailElement.send_keys("klaus.werner@example.com")
addressElement.send_keys("Random Street")
cityElement.send_keys("San Francisco")
stateElement.send_keys("CA")
zipElement.send_keys("94107")
countryElement.select_by_value("US")
driver.switch_to.frame(iframeElement)
cardElement.send_keys("4111 1111 1111 1111")
driver.switch_to.default_content()
submitButton.click()

Notice how I switched to the iframe before writing in the Card input?

And I also switched back to the main page after that.

It's a bit easier to deal with iframes if you're using Endtest:

Since you're planning to run that test multiple times, you should generate a random email address and store it in a variable.

You can even test that email with the Endtest Mailbox

Puppeteer vs Selenium

Klaus — Mon, 15 Jul 2019 19:55:39 +0000

Puppeteer and Selenium are both popular, powerful and widely used solutions for automating web applications.

But which one should YOU use?

The answer depends on your specific needs.

Choosing the wrong option could delay or worse, sabotage your automated testing project.

I'll share my own opinion at the end of this article.

Here are some PROS and CONS for both of them.

Puppeteer

PROS
• Faster than Selenium
• Easy to install
• Written and maintained by the Google Chrome devs

CONS
• Works only with Chrome
• The only supported language is Node.js

Selenium

PROS
• Works with most browsers
• Multi-language support
• Huge community of users

CONS
• Difficult to run on all browsers
• A bit slower than Puppeteer

To sum it up, Puppeteer is faster than Selenium, but it works only with Chrome, while Selenium works with Chrome, Firefox, Safari, Internet Explorer and Edge.

Now, for my opinion: both solutions are outdated and built with the narrow mindset of developers who refuse to see beyond their code.

It may sound lazy, but I believe that a solution for automated testing should be like a washing machine: it should give me enough flexibility to choose different inputs and settings, but it shouldn't make me pump the water with one hand and spin the drum with the other.

What both solutions are missing:

• Video Recording functionality
• Turnkey Machine Learning
• Integrated Email Testing option
• Screenshot Comparison feature
• Automatic Smart Waiting
• Structured results

Other issues with Selenium and Puppeteer:

• Difficult to upload files in a test
• Difficult to deal with iframes
• Difficult to integrate with your CI/CD system
• Difficult to configure Element Load Timeout

If you're looking for a better alternative, try Endtest.
It has Puppeteer's speed, it supports Selenium's browsers AND it has all the features that they're missing.

Forem: Klaus

9 Extremely Useful HTML Tricks

1. The <figure> tag

2. The <video> tag

3. The <picture> tag

4. The <progress> tag

5. The <meter> tag

6. The <map> tag

7. The contenteditable attribute

8. Input suggestions

9. The <noscript> tag

Best Automated Testing Tools for 2020

1. Endtest

2. BrowserStack

3. Sauce Labs

9 Extremely Powerful JavaScript Hacks

1. Replace All

2. Extract Unique Values

3. Convert number to string

4. Convert string to number

5. Shuffle elements from array

6. Flatten multidimensional array

7. Short Circuit Conditionals

8. Dynamic Property Names

9. Use length to resize/empty an array

Selenium Cheat Sheet

1. Import the Selenium library

2. Start the webdriver and the browser

Starting the webdriver and the Chrome browser.

Starting the webdriver and the Firefox browser.

Starting the webdriver and the Internet Explorer browser.

Starting the webdriver and the Safari browser.

3. Open a website

4. Find an element

Find element by ID

Find element by Name

Find element by Class Name

Find element by Tag Name

Find element by Link Text

Find element by Partial Link Text

Find element by CSS Selector

Find element by XPath

5. Click on an element

6. Write text inside an element

7. Select an option

You can use the visible text:

You can use the value:

You can also use the index:

8. Take a screenshot

9. Upload a file

10. Execute JavaScript

11. Switch to iframe

12. Switch to the next tab

13. Switch to the previous tab

14. Close tab

15. Close alert

16. Refresh

17. Hover

18. Right Click

19. Click with offset

20. Press Key

21. Drag and drop

22. Get Page Source

23. Get Cookies

24. Delete Cookies

25. Get first element from list

26. Configure Page Load Timeout

27. Configure Element Load Timeout

28. Set window size

29. Change the user agent string

30. Simulate webcam and microphone

31. Add Chrome Extension

32. Emulate mobile device

The Nastiest Bugs I've Ever Encountered

1. The $0.00 price on all invoices

What lesson did I learn?

2. The phantom server

What lesson did I learn?

3. The million-dollar input

What lesson did I learn?

1. The `<figure>` tag

2. The `<video>` tag

3. The `<picture>` tag

4. The `<progress>` tag

5. The `<meter>` tag

6. The `<map>` tag

9. The `<noscript>` tag