By: Matt Chiang
As many of you know, automation is a great skill/asset to have. However, building automation is only part of the solution to checking code for problems. There are many other supporting technologies that goes into putting a usable solution together so that the automation doesn’t have to run your local machine and consume the time you would otherwise be manually or doing adhoc testing.
Here’s the challenges this hackathon will help us learn and figure out.
- How to launch the automation w/o an IDE or from your local machine. headless automation maybe?
- How to write reusable tests. Object oriented programming principles and
- How to build data driven automation tests.
- How to make QA transparent so that others can run the tests.
- Learn mobile automation.
- Learn how to control elements using drag and click.
- How to increase our velocity to run 33 tests in a matter of a couple of minutes.
- How to build 1 test that will test 33 different data sets using IE, chrome, and FF w/o having to write 99 separate tests. If we apply this to mobile (Android using Chrome), that would mean 132 tests total. Writing one tests will make the automation maintainable.
- How to build a solution so that one can see historical trends of each test and each time it ran and which browser it was ran on. In today’s agile environment of deploying often and testing often, these tests might be ran once or ten times a day. If they are ran after new code is deployed and the test is triggered, how do we check for failures w/o having to watch the tests run? This could be a web app that gathers all the data and the automation sends the test status or any info to the web app for it to parse and display. At the end of the data, one person can go view the results.
- For the advanced requirements, building tools that facilitates the solution. This could be another webapp to allow business analysts, project managers, your kids, or your parents to modify the data and to run the tests.
- For the web app for reporting, add in filtering or searching so that you can easily narrow in on a specific test or result you want to see.
Here’s the site/web app we are going to build a solution around.
https://www.nuskin.com/content/nuskin/en_BE/ageloc-me-assessment.html
This version of the web app for the Belgium market. If you look at the CountryURL column in the spreadsheet, it will give you the starting point of where the web app is for every market.
The background of this app is a single page app that allows people to customize a lotion that fits their skin type. The levels of chemicals in each formulation can make you look younger, or have no effect. It’s an app that I have already automated w/ a solution around it to do regression testing on desktop web and mobile. If you build the automation so that it’s reusable and generic enough, you should be able to use the same code on the web and mobile and only have to change one line of code. Also, if you build your code to be reusable, you only have to write 1 test and scale it to verify 33 different variations across the world markets.
The attached xls spreadsheet is the data you will be using to test and to verify pass/fail. The data should drive your tests and values for each option / scale for which the code need to emulate to that you can verify the correct assessment code w/ the correct formulation based on what the user is wanting.
The age column is the numeric value entered on the page asking for age.
Gender, skintype, aha, firmness, radiance, texture, dayfragrance, and nightfragrance, data controls which button needs to be clicked.
Ethnicity is a link.
Location is used for text search for the location page.
Pollution, environment, sensitivity, agespots, wrinkles, wrinklesnose, wrinklesforedead, and pore, are on a 1 to 100 scale to control the slider on the various pages.
The OriginalAssessment is the code that will be generated based on the data that is used to run the tests.
You’ll also see a DateChanged and a NewAssessment column.
These are used to store your data when you tests completes. If the code isn’t the same, the new code needs to be logged into the NewAssessment column and DateChanged is the current timestamp for when the test detected the change. If the code is the same, then nothing needs to be stored in the spreadsheet. This will solve the problem if basic test reporting.
Here’s a list of the requirements:
Basic Requirements
- Use the Page Object Model in the framework (PageFactory and @FindBy annotations)
- Use collections such as Lists for related WebElements
- Load data provider info into a Map
- Multi-language support
Functionality Requirements
- Ability to automate locations other than the app’s GPS auto-locate
- Implement drag and drop functionality for the slider dials using percentages
- Use just one test class that dynamically handles different test data
- Be able to automate and handle several types of moisturizer choices and handle relevant modal windows that may be called
Optional Requirements:
- Run spell checking (Agreement TOS, etc.)
- Save assessment summary to a document
Advanced Requirements:
- Integration w/ build system (Ant, Jenkins, etc)
- multi threading automation. (automation code itself, use of Docker, grid, etc).
- reporting of historical tests and general trends for pass/fail (use of built in test reporting is fine but it doesn’t really show results from test to test w/o manually opening the report).
- web based data provider (restful web service, database, etc).
- web interface so that any end user could manipulate the test data and run the tests. Make this a point/click/run.
- mobile automation on android (remote, local, multithreaded testing).
For those who want to focus only on the automation portion, here’s the list of things to help you break down the challenge:
Challenge #1
Begin an automation framework for testing the Single Page App (SPA) located at, https://www.nuskin.com/content/nuskin/en_US/ageloc-me-assessment.html#/you-start by automating the acceptance of the license agreement. Automate the input of a name, age and gender, ethnicity, and a non-GPS specified location as well.
Challenge #2
Automate the selection dial to move in percentages, automate the first dial entitled, “Chemical Exposure” to move 70% (High Exposure).
Challenge #3
Complete the automation of the entire app, to the end of the assessment. Be sure to automate for handling of all the possible modal pop-ups shown for Day Moisturizer and Night Moisturizer dial selections.
Challenge #4
Modify the automation to run successfully in 2 different mobile device types (e.g., iPad and Samsung Galaxy S4) using the Chrome Mobile Emulation through the ChromeDriver capabilities.
Challenge #5
Modify the automation to utilize the first line of test data given through the data provider, an Excel Spreadsheet (provided). Incorporate the use of collections (lists, maps, etc.) to store the data provider information for the tests.
Challenge #6
Enable framework to run language-independent, with the ability to run the tests successfully in any language specified through the data provider.
Challenge #7
Integrate the automated framework into a build manager (Ant, Maven, Gradle) and run the tests on a Continuous Integration Server such as Jenkins or Hudson.
Challenge #8
Enable a multi-threaded execution of the tests listed in the data provider. Run the tests in multiple browsers using Selenium Grid. (Optional/Extra Credit: Run the tests in Selenium Grid using multiple Docker containers).
We are going to do this a teams and include developers and QA engineers. You are welcome to invite family, friends, classmates to be on your team. You might also want team members from different disciplines to help w/ different areas of this solution. Front end dev can your team build the front end of the reporting app, c#/java/php/etc dev can help build the controller for the web app, DBA and help you build the models where the data is stored and optimize search queries. They don’t have to primarily focus on automation. However, it’s up to your team. The teams can be anywhere in the world to build out the solution. There’s plenty of online tools to help w/ collaboration, communication, and task management.
Here’s a list of the free ones that can be used.
https://pinup.com and http://scrumblr.ca can help you build your agile board of tasks. The boards sticks around for a while. I tried out both by creating a test board and adding items and even after a week, I can still see my board w/ all the tasks.
https://codeshare.io/ can help you collaborate w/ other team members so they can help you debug.
https://ideone.com/ is another good place as well.
Github is a great place to store your code.
You can also use https://slack.com/ or https://trello.com/. Use whatever that will make your team successful.
To get you everyone started, you can go to this URL and start building your teams and or start planning and breaking down the work.
http://scrumblr.ca/stghackathon
We will announce when the hackathon is posted in our blog on https://stgconsulting.com/blog/
We will run the hackathon for 4 weeks and judging will commence mid December. We’ll have judges grade the solutions based on “easy of use”, “amount of requirements solved”, “most unique solution”, “fastest to run/get results”.
Winning team will have recognition on STG’s site forever and each team will walk away w/ a digital portfolio you can show others.
By Josh Porter
Custom CSS Properties are now supported in all major browsers except IE 11.
Custom CSS Properties used be called Native Browser Variables. They have since changed the name to distances the Custom Properties from SCSS variables. Lets dive in and see them in action.
SCSS vs. Custom Properties
You can see the top left example is SCSS and the bottom left is using Custom Properties. They render the exact same result on the right of each example.
Why Use Them?
- No pre-processor necessary
- They Cascade: You can set a custom property inside any selector to set or override its original value
- When their values change the browser repaints as needed (i.e. media query or other state)
- You can hook into the custom property via JavaScript
Drawbacks and Benefits
| Drawbacks |
Benefits |
| IE Doesn’t Support it&elipsis;yet |
- Custom properties exist at runtime
this means that their values can update in the browser and it will be updated in real time |
|
They can have a fallback inline with the value separated by a comma |
DEMO TIME
bit.ly/css-cp
In this example I am setting the custom properties to :
--width: 25%;
--margin: 20px;
--background-color: #177C9C;
In this codepen I am setting media queries to change at 600px and 400px max width so on window resize the custom properties are changing on the fly and there is no need to have the page rerender.
A better example of custom properties being scoped is bit.ly/css-cp-1.
In this example I am setting the font size to 5rem but scoping the property by class and it is scoped within that class. For example:
So class .block__highlight redefines the custom property of –block-font-size as well as .block
Something else you can do is just assign a property on a pseudo class:
So I am assigning a new value for –bg-color in div.red:hover but I am not assigning a property(in this case background) it is inherited by the div.red class.
Changing Custom Property via Javascript
In my opinion the coolest thing you can with these is access custom properties via javascript. Once you do the page doesn’t need to be re rendered. It live paints the changes. Here is an example: bit.ly/css-cp-2
I have a event listener on change and setting the custom property to the value of the input
CSS GRID
CSS Grid is the future of website layout…. In my humble opinion of course.
What is it?
Flexbox vs GRID
“Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together).
Grid is for two-dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power.
If you only need to define a layout as a row or a column, and you would like the flexibility to respond to the content of that row then you probably want flexbox. If you want to define a grid and fit content into it in two dimensions – you need grid.” – http://gridbyexample.com/what/ – Rachel Andrew
Given the above image to code this I would use Flexbox by doing this :
I would set the wrapper to display: flex and flex-flow: row wrap; I then have to set the children elements to have a width, height and margin.
The Grid way:
Before I start showing the way to code it in Grid. I want to go over some new terminology that comes with CSS Grid.
 |
Grid Lines are the lines that make up the grid. These can be horizontal or vertical. We can refer to them by number, or by name. |
 |
A Grid Cell is the space between 4 Grid Lines. So it is the smallest unit on our grid that is available for us to place an item into. Conceptually it is just like a table cell. |
 |
A Grid Track is the space between two Grid Lines, either horizontal or vertical. |
FR(Fraction Unit)
Fraction units, or fr, represent 1 portion of the available space left within the grid. Think of it like Flexbox’s flex-shrink and flex-grow. All fr’s are in relation to one another.
Keep in mind that frs used on row heights will behave differently than on columns.
So for example you will see CSS like:
The top example will give a grid with 4 columns with 1fr width.
The next one will give you the same. But it uses grid’s repeat function.
The width and height of the grid can accept mixed unit measurements.
GRID-GAP
Short hand for a combination of grid-column-gap and
grid-row-gap, this is what defines the spacing between cells. Again, it’s not picky on unit types.
However, the grid-row gap and grid-column-gap have to be the same for each column gap or row gap…..unfortunately
A couple things about grid-gap.
- It is declared on the parent;
- Grid-row spacing is declared first in the short hand version.
WHEN CAN WE USE IT?
Now I now showing you this is a BIG teaser but it is coming I promise. All the major browsers have shipped with this new feature in their next release. The rumor is that they will be releasing by the end of March 2017. However, there is a chance that they won’t release the version until the end of 2017.
How do we use it today?
Here is how you enable that feature in your browser today:
- CHROME: ITs live on the latest version.
- safari: menu: Develop > Expermenital Features > CSS Grid
- Firefox: It’s live on the latest version
- Opera: opera://flags/#enable-experimental-web-platform-features
- Epiphany: set the env var to WEBKITGTK_EXPERIMENTAL_FEATURES:$ export WEBKITGTK_EXPERIMENTAL_FEATURES=”CSS_GRID_
OK now let’s code that same grid but now using CSS Grid.
You can follow along by going to this codepen and trying out the code yourself.
Here is what I did to create a 4 x 3 grid:
The declaration is only on the parent not the child. The grid is smart to layout the dom elements with 4 lines of code.
You can tell a child to start at a specific location by telling it : grid-column or grid-row.
For the 4 x 3 grid you can see the grid lines in green.
If you wanted box 10 to start at the top you write this:
.ten { grid-column: 1 / 2;}
This is short hand for grid-column-start and grid-column-end. Same goes for grid-row.
Let’s build this layout:
SOLUTION:
With declaring 4 classes I have created a pretty complicated layout.
TEMPLATE AREAS:
This feature gets me excited. This allows easy access to assign children to a specific area.
The above code renders something that looks like:
Final project: bit.ly/css-grid-final
Building this in flexbox you would have a number of parents wrapping different sections of the page.
The solution using grid only has 1 parent!!!
In summary….I believe that CSS Grid is the FUTURE of website layout. That said it is not a replacement for flexbox. I think they can be used together to accomplish pretty complicated layout. So look for this new feature coming to all browsers coming soon.
Author: David Hales
I recently was working on my personal blog site, and I wanted to enable users to log into Facebook, in order to access features of my site.
After looking into multiple options, and playing around, I finally decided to use an Angular 2 wrapper around the Facebook Javascript SDK.
I am doing two things. I am allowing users to log in, and I am saving their email and basic profile information. The SDK, can be leveraged to allow you to post to their account, and all sorts of things, and I might later utilize this, but for now I am not.
First thing you need to do is get a Facebook Developer account. To do this, login to Facebook.
Go to https://developers.facebook.com/ and click the register button in the top left corner.
Click the Create App ID button to create your first app.
Fill in the data and click Create App ID
After the app is created, it will automatically put you to the Add product page. Click the Get Started button for the Facebook Login section:
It will then ask you to choose a platform. Select Web:
Enter your URL, and click Save
The remainder of the setup for that gives you the Javascript code to access the SDK, but since we are going to do this in angular 2, you can just click continue through the rest of the screens here.
Now click on the settings under the Facebook Login section on the left hand navigation.
You will need to enter your website into the Valid OAuth redirect URIs section, or you won’t be able to do OAuth authentication with Facebook. You can enter multiple here, so you can have your local, dev, test and production URL listed.
Click the Save Changes at the bottom of the page.
Up at the top of the page, is your APP ID.
You will need this, in order to access your app from the SDK stuff.
So now to your angular app.
I am using an Angular 2 wrapper, that you can install using the following, in your Package Manager Console:
npm install ng2-facebook-rxjs –-save
You will also need to add the Facebook SDK script tag to your page, I put it in the _Layout page in my MVC portion of the project, so it is in the base of my whole site.
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/sdk.js"></script>
I am implementing the Facebook button and logic into my navbar component. I will give the full code for this component, so you can see the usage.
navmenu.component.ts
The import section:
I use the Router for doing a redirect on logout. The UserService is my own service where I save data back to my DB that I get from Facebook.
Set the API ID:
Create the Component:
The following snippet is the rest of the code for the component.ts file. You have to make sure to pass the services into the constructor, as well as the Router.
I do an initial check against Facebook to see of the user is already logged in. If you are logged in, it gets the latest information from Facebook, and saves it back to the Database using my UserService.
You will want to add a login and logout methods. You can see both below. On logout, I redirect back to the home page, just to make sure you don’t get stranded on some logged in page.
You will see on the login call, I specify the Scope, this.fb.login({ scope: ’email,public_profile’ }), this asks the user for permission to access their email and profile. It does not grant access to post for them, or get access to friends list, etc. You can refer to the Javascript SDK for other options of things to request.
You will also see me call this.fb.api(‘/me’, ‘get’, { fields: ‘email, first_name,last_name’ }). This is how to tell the facebook Graph API what fields you want to get. You will also get the ID back from Facebook, which is an ID specific to the user and Facebook App. I then also save this information back to my database using the UserService.
The following is the snippet of how I send the data back to my API(MVC controller that does the save to the database)
Navmenu.component.html
This is an excerpt from the HTML, where you can see how I am using *ngIf to show or hide buttons based on isLoggedIn which is being set in the .ts file. You can see where I am putting the first name from the object on the screen, as well as I’m changing the Logout or Login button based on the logged in Status.
Possible Pitfalls:
I ran into an issue along the way, which was the following error:
error TS2304: Cannot find name 'FBUIParams'.
The creator of the wrapper says you can run this, and it should fix the issue:
typings install --global --source=dt --save fbsdk
This did not work for me, but I removed the FBUIParams from the facebook.service.ts file, and the issue was resolved.
Author: David Hales
Author: Geoffrey Sagers
If you are anything like me, you want the latest and greatest. In the area of web development, that can definitely be a double-edged sword. Using only the latest technology you shut out many users who either must use older browser due to corporate restrictions, or choose not to upgrade.
One of the most commonly used languages used on the internet is Javascript, and probably the most used Javascript plugin is jQuery. What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
The most current version (as of today is 3.1.1), but the most commonly used version by a large margin is still version 1 with close to 90% of all sites using it. So why is this? Some is just a webmaster overlooking an upgrade, but a fair amount is also because it just works.
Let me give you an example. On a recent assignment, I was tasked with upgrading a client’s site to the latest version of WordPress. The most recent version of WordPress (4.7) uses jQuery 1.13 by default. Their installation was an older version of WordPress with an older version of jQuery. The WordPress update went off without a hitch, but one of their Javascript add-ons (not WordPress plugins) stopped working.
I was puzzled. In looking through the add-on script, but saw nothing out of the ordinary. It used jQuery 1.7, but the differences between minor versions (after 1.6) is fairly small, so I didn’t think that was it. After a little rummaging, I managed to change WordPress to use version 1.7 (which is not recommended) just to verify, and that didn’t fix the problem.
After changing it back to version 1.13 in WordPress, I tried updating the script to use version 1.13 — but this also failed to bring it back to life. I was getting stumped.
Some of what STG helps its clients accomplish is to streamline systems. This particular client had had many web developers over the years, and each one brought in more plugins and addons to fit the client’s current needs. In looking through their WordPress installation, they had 37 plugins installed. My next step was to update each of the plugins. These also went off without a hitch, except one, that needed a file-by-file replacement (not ideal, but still worked fine in the end).
Still the problem remained. It had been several hours, and I was starting to become frustrated. As I looked through the plugins, and there was one that — according to its description, kept jQuery at the latest version. This sounded promising, so I disabled it. Eureka! The problem was solved! Just to double check, I re-enabled it, and sure enough the problem re-appeared. To make a final pass, I copied the output of the page to a new document, re-enabled it, then did it again. When comparing these two files, I found that despite version 1.7 being loaded in the header of the page as expected, this plugin was loading version 3.1 further down. Problem solved!
In conclusion, when updating your scripts you didn’t write, watch for irregularities that probably will pop up from time to time. Keep your own scripts as up-to-date as possible, maintaining a balance between cutting-edge and audience capability. When keeping your site updated, keep up a regimen validating the use of plugins and scripts, and when they are not useful anymore, disable, or better yet, remove them. This will save you, and others like you, countless hours in the future debugging code.
Geoffrey Sagers
Senior Web Developer
Software Technology Group
Author: Aaron Salazar
A few years ago I was introduced to John Allsopp’s article “A Dao of Web Design” by a great UX designer that was on my team at the time. Since then I’ve read a few times and have forwarded it on to co-workers in an effort to spread its good word. The CRAZIEST part of this article is that it was written in the year 2000, the veritable stone age of web development, yet its message of harmony is just as relevant today if not more so now that we have mobile to worry about.
I think this article can be summarized by just a few points. I feel these points summarize adequately. However, I encourage you to read the article because it is interesting to see how relevant it still is and to read through all the practical suggestions.
-
- The Internet, a relatively new medium, is constrained by those who would have it function like printed media.
-
- Web pages flow depending on the size of the screen, accessibility settings, browser type, OS, etc. Embracing the flow of the web is essential
-
- The goal is to build in adaptability into our web pages so that they can adapt to all possibilities or at least the most common possibilities. Where our design fails to adapt, accept full adaptability as an aspiration.
-
- Use HTML for scaffolding, use appropriate tags when available. For example, use <em> instead of <i> which lets the user’s browser settings decide how to emphasize.
-
- Use CSS for presentation.
-
- Don’t rely on fonts and font sizes. Larger and smaller should be sized using percentages and not absolute pixels.
- Layout elements should use the “em” unit which is a unit that is relative to the current font size.
Instead of forcing our pages to look pixel perfect we should instead design for functionality and embrace the flow of the content. In this way our pages will be more likely to just work on all browsers and platforms.
Author: Aaron Salazar
I have been a software developer for a number of years and I find there are many sonic distractions in the office that prevent me from concentrating. Sometimes it is something small like someone eating an apple in a loud way or something big like a boisterous meeting conducted in an adjacent cubicle. A lot of developers listen to music but even music can sometimes be distracting especially if it has words. So, over the years I have compiled a few sources of noise that doesn’t distract, to block out the ambient noise. Here is a list of some good noise sources that cover sounds, but aren’t a distraction themselves.
SimplyNoise is my favorite noise generator because it simply plays white, pink or brown noise. You’d be surprised at how much ambient noise this can block out. I like the brown noise best because seems softer than the others. SimplyNoise also has an app for iOS and Android.
Similar to SimplyNoise, PlayNoise is a noise generator which has all the colors and options SimplyNoise provides only with a simpler interface. PlayNoise has no mobile apps.
This site is quite amazing. You can pick an environment, like outside in the rain or maybe a boat floating in the sea, and then you can set the volume and frequency of all the ambient sounds. Too much thunder? Make them softer or less frequent! Ambient-Mixer also has iOS and Android versions.
This is a simple site that provides a list of music that “aid concentration and increase productivity”. I’ve listened to the first few “episodes” and they are great!
This is a free electronic radio site that also has apps for all major phones. It is great because it has many, many channels some of which are just chill ambient sounds.
Unless you have a background working with computer programming, when you hear the term Bash script programming you most likely don’t know what it is. Bash script programming is known for being one of the easiest to learn when it comes to computer scripting languages. But the trick is learning it well, and making the foreign language that computers seem to speak make sense.
Bash is a useful program because it allows the user to give the computer instructions and take more control of what their computer is doing. Many IT frustrations happen when basic programming isn’t fitting a company’s or person’s needs. Bash is one way to make sure your computer is working for you, instead of against you.
It can be difficult to know how to override and change these original programming languages, especially if you do not understand computer coding and programming. Software Technology Group, also known as STG Consulting, understands these computer languages and is a great resource for helping companies get programs like Bash set up. If you are struggling with scripting languages like Bash or any other IT solution, STG Consulting can help you get started and consult you through its implementation. Using programs like Bash can help you maximize the way your computer is working for you and your company.
Contact STG Consulting today to learn more about our services and how we can help you with your special projects and IT concerns.
