alisa ky chen @alisa-ky-chen-code - Tumblr Blog

Posts

I tried to style a fieldset element with display: flex and display: inline-flex. However, it didn't work: flex behaved like block, and inline-flex behaved like inline-block. This happens both on

Thanks to Isaac for discovering this.

Game Design and Development from Michigan State University. Break into the video game industry with theoretical, technical, and business knowledge ...

I enrolled. Study time!

#unity3d

dduane

"Burn, baby! BURN!"

Possibly the best of the (later) comments: the one regarding problems with stirring the cryogenic tank when there’s a short in the system, followed by the somewhat laconic response: “This issue is fixed in Apollo 14.”

#quartz #keith collins #github #apollo #assembly #code comments

As algorithms play a growing role in determining the content delivered to us online, many critics say the results are often filled with biases. Women see ads for lower paying jobs and African-Americans for cheaper neighborhoods. Can computers be just as biased as humans?

#npr #human side of programming

Customising jQuery Mobile Widgets via Extension

or How to Leave an External Library Intact and Customise Your Web App.

Resources:

Extending Widgets with the Widget Factory

version of jQM to customise ex. uncompressed jQuery Mobile 1.4.5

Steps:

Find widget to customise, ex. $.mobile.panel

Find function to shadow, ex. _createModal: function() {}

$.widget( "mobile.panel", $.mobile.panel, { // creates overlaying div across rest of UI that detects event dismissing panel _createModal: function() { var self = this, target = self._parentPage ? self._parentPage.parent() : self.element.parent(); self._modal = $( "<div class='" + self.options.classes.modal + "'></div>" ) .on( "mousedown", function() { // close without animating; reset animate option after var animated = self.options.animate; self.options.animate = false; self.close(); self.options.animate = animated; }) .appendTo( target ); } });

#web #javascript #jquery mobile

(via https://www.youtube.com/watch?v=UFj27laTWQA)

Presented last year, support for various libraries and frameworks has since emerged. Such as AWS Mobile SDK for Unity.

Resources:

AWS Lambda (Amazon)

AWS Advent 2014 - Exploring AWS Lambda (Tumblr)

#aws #amazon #aws lambda #mbl202 #unity3d

Elliot Loh on Software Development

Elliot Loh:

Always wanted to travel back in time to try fighting a younger version of yourself? Software development is the career for you!

— Elliot Loh (@Loh) December 12, 2013

#elliot loh

A guide to enabling keyboard navigation, which most Mac OS X web browsers support but have disabled by default.

I keep forgetting this when setting up a Macbook for testing accessibility.

#456bereastreet #lesson learned #accessibility #web #test

Backbone.Marionette Mixins and the Problem of Expecting Others to Think Like You

I've been in a lighthearted debate with my dear tech lead at work, me on the side of favouring mixins for Marionette Views, and him wisely shaking his head at the dangers. After several months, I see why. Upon reflection, it relates to what he said once; in the industry, you're only present for a small percent of your code's lifetime. It is important to write code that is easy to understand and maintainable by others.

Part of the problem is the way I wrote this mixin utility. It allows some functions to be "mixed" together (ex. if a SearchView has an initialize() and a FormMixin has an initialize(), the resulting "mixed" object calls both functions) and others to be shadowed or over-written. This has been due to the mixin utility bringing together the functions of two objects into one object to give to Backbone.Marionette to turn into a view.

Leveraging features of JavaScript for this mixin code has been awesomely flexible and powerful. But it is also terrible code because it makes the final behaviour difficult to trace when some functions are shadowed--which I had thought would never need to be shadowed, whoops--and others are not.

The main problem, and my regret, with this particular implementation is that it was written with the expectation that fellow coders, who bring their own awesome ideas to the table, are expected to think the exact same way as one particular coder to trace and maintain this code.

The Mixin utility is available on Github, and suggestions for improvements welcomed.

Resources:

[Kim Joar Bekkelund] Mixins in Backbone

[Derick Bailey] JavaScript Mixins Beyond Simple Object Extension

#lesson learned #javascript

Dynamic Freedom in JavaScript

I had a discussion comparing a strongly-typed, object-oriented language (Java, C++) versus a compiled-just-before-runtime language like JavaScript. The main point against the latter was the lack of strong typing led to more mistakes that wouldn't get caught at compile time.

After sleeping on it and conversing aloud with someone else, I think this the dynamic freedom of JavaScript seen from a different perspective. It's like memory allocation and pointer arithmetic in C; difficult at first but amazingly useful--freeing even. I felt limited when discovering there were no pointers in C#. In JavaScript, the lack of strong typing is freedom from the usual overhead of setting up classes and interfaces just right, and having to go back to a strongly-typed language means trading this in for some other advantage.

#lesson learned #c #javascript

Somehow I forgot the point of prototyping--doing it fast to get feedback--and got lost in trying to implement functionality before prototyping was done to define the functionality! Complacency from getting final drafts of technical proposals and mockups handed to me?

Protyping lesson relearned thanks to Evizaer. Now I have a Unity scene with sprites, following Unity's 2D workflow tutorials.

#unity3d #unity3d 4.6 #resource #video #prototyping #lesson learned

Stings a bit for the inner perfectionist, but the article is a much-needed reality check. Need to reorient and aim for good code, not perfect code.

Code is written to be changed – that is why it’s called “software”.

#swreflections #lesson learned

Klei Entertainment recently started Closed Beta of a multiplayer version of their game Don't Starve. Of particular interest from a game design perspective, and thus brought to my attention by my friend Shiri, Ipsquiggle of Klei made the following post discussing how to maintain what their wilderness survival game is about while shifting from single to multiplayer.

The whole reason we're changing the combat tuning for DST is because, simply, Don't Starve is a game about dying when you aren't prepared, and where combat is something you must prepare for. ...

The first thing is separating the acts of resource gathering from "fighting". Birds and rabbits, and even spiders for the most part, are part of the resource gathering part of Don't Starve and, ideally, will feel similar to the base game. On the other hand, taking on pigs, hounds, or Deerclops is a direct combat challenge, and should be appropriately challenging. Specifically, these fights should take multiple players to win. Don't Starve is a game about maintaining resources and being prepared. Well, you now have one more resource to manage: your buddies.

Klei frames the problem very well and is good about including their players as they explore possible solutions. Here's their forum post in full.

#game design #klei entertainment #don't starve #don't starve together

Transcript of Rect Transform - Unity Official Tutorials

Resource: A formatted transcript of Unity3D's video tutorial Rect Transform - Unity Official Tutorials. The Unity team packed a lot of information in 14 minutes.

Contents

(00:00) Introduction to the Rect Transform

(01:36) Rect Tool

Move

Resize

Rotate

Pivot Point

Editing in Global and Local Space

(04:03) Position and Size

Position

Size

(04:46) Anchors

(06:56) Prevent Resizing

(07:19) Resize Relative to the Parent

(08:58) Left, Right, Top, and Bottom

(09:52) Anchor Presets

(10:58) Pivot, Rotation, and Scale

(10:58) Pivot

(11:10) Rotation

(11:28) Scale

(12:35) Editing Modes

(13:31) Values Driven by Another UI Component

Introduction to the Rect Transform

(00:00) The Rect Transform is a new component that replaces the usual Transform component on all new UI elements. Whereas the Transform component represented the position, rotation, and scale of a 3D object in the scene volume, the Rect Transform represents a 2D rectangle specified by a width and height related to a pivot point. Even though the Rect Transform represents a 2D rectangle, the component does include a position along the z-axis as well as rotation and scale, so the element can be manipulated in the scene volume as a 3D object.

One important difference between a Rect Transform and the traditional Transform component is the concept of anchors. A Rect Transform can be anchored to its parent if that parent also has a Rect Transform component. Anchoring allows the UI element to move or stretch based on the position and size of the parent UI element's Rect Transform.

All UI elements must ultimately be a child of a canvas. Canvases themselves have a Rect Transform, so in almost all circumstances the parent of UI element will also have a Rect Transform and UI element will be anchored in some way. See more [transcribed] information on the canvas here.

Rect Tool

(01:36) In the Scene view, it is best to use the Rect Tool to manipulate a UI element. The Rect Tool can be selected by clicking on the Rect Tool button in the toolbar or by using the shortcut key 'T'. With the Rect tool selected, it is possible to move, resize, and rotate any UI element with this one tool.

Move

Using the Rect Tool on the selected UI element, it can be moved by clicking anywhere within the rectangle and dragging.

Resize

The UI element can be resized by clicking on any of the edges or corners and dragging. The cursor changes when hovering over an edge or corner from the usual pointer to a double-arrow aligned with the direction the UI element will resize when dragged. Holding the Shift key will constrain the UI element to be resized proportionately.

Rotate

The UI element can be rotated by clicking near any of the corners and dragging outside of the rectangle. The cursor will change to indicate when the tool can rotate the UI element.

Pivot Point

Resizing or rotating a UI element is done in relation to its pivot point. The pivot point is indicated by a blue ring, which by default starts in the centre of the UI element. The pivot point can be moved by clicking and dragging on the pivot point indicator in the scene view. The pivot point does not need to be inside the rectangle of the UI element. Placing the pivot point outside of the UI element's rectangle can be done for specialized behavour.

Editing in Global and Local Space

Another difference between the Transform component and the Rect Transform is the effective global and local space on editing. When editing UI elements in local space, the rectangle and handles are aligned with the UI element. In global space, the rectangles and handles are aligned globally and the rectangle indicates the bounds of the uI element. This is most notable when the UI element is rotated.

Position and Size

(04:03) When looking at the Rect Transform in the Inspector, it is clearly different from the Transform component. The Position and Size of the UI element are shown in the upper right of the inspector for the Rect Transform component.

Position

Positions X and Y show the distances in pixels from the anchor point to the pivot along the x- and y-axis respectively. The Position Z is the distance along the local z-axis and is often left at a value of 0.

Size

Size fields Width and Height indicate the dimensions of the UI element in pixels.

The Position and Size fields are dynamic and context-sensitive. They relate directly to the position of the anchors.

Anchors

(04:46) The Rect Transform component includes a powerful anchoring mechanism. Rect transforms can be anchored to their parent if the parent game object also has a Rect Transform component. In most cases, every UI element will be anchored to its parent in some way.

In the scene view, the anchors are represented by four small triangles. By default, these are grouped together as a single anchor point in the centre of the UI element's parent Rect Transform but can be ungrouped by moving them. Each triangle represents one anchor and each anchor is associated with one corner of the rect transform. The upper left anchor is associated with the upper left corner on the parent's Rect Transform. This is the same for each anchor and each corner. Anchors are positioned within the bounds of the parent's rectangle, not the UI element's rectangle. Anchors cannot be positioned outside of the bounds of the parent's rectangle.

Anchors have a fixed relationship to their UI element's Rect Transforms, which they are anchoring. Anchors have a flexible relationship to their parent's Rect Transform, which they are anchoring to.

An individual anchor can be moved by clicking and dragging on its triangle gizmo. Clicking in the centre of a group of triangles will move the triangles as a group.

When setting an anchor, the distance between the anchor and the associated corner of the element's Rect Transform is a fixed value. The anchor's position within the parent's Rect Transform however is relative to the parent's size and is affected by changes to the size in the parent's Rect Transform. The anchor's position relative to the parent is a precentage of the parent's size along the x- and y-axis and its absolute position can change when the parent's Rect Transform changes. This percentage is represented by a normalised value from 0 to 1 along each axis where (0, 0) is the lower left of the parent's Rect Transform and (1, 1) is the upper right.

Prevent Resizing

(06:56) Practically, this means if all four anchors are grouped together around a single point, the UI element will be anchored to that point. If the parent Rect Transform changes in size, the UI element will move along with the anchor. The UI element will not stretch or resize, as the distance from the anchors to their associated Rect Transform corners is fixed.

Resize Relative to the Parent

(07:19) If however, the anchors are separated in any way, the UI element will stretch along with the parent, as the anchors and the space between them are relative to the parent's Rect Transform and will change in size. How much the UI element stretches compared to its parent depends on the placement of the anchors. A few common cases are:

positioning the anchors on the corners of the UI element, in which case the UI element stretches to maintain the same percentage area of the element.

positioning the anchors at the bounds of the parent, in which case the space between the edge of the UI element and the bounds of the parent will remain the same, creating a fixed border.

positioning a pair of anchors grouped together at the edges of the parent's Rect Transform, in which case the UI element will stretch only on one axis (ex. left anchors on parent's left bound and right anchors on parent's right bound will set UI element to stretch horizontally but not vertically).

The stretching behaviour of an anchored UI element can be tested by grabbing the edge of the parent's rectangle and dragging it. The preview label appears when dragging and the parent's rectangle snaps back to its original state when the dragging ends.

To make editing easier when positioning anchors by hand, holding the Shift key will change the size of the UI element as well.

Left, Right, Top, and Bottom

(08:58) It is important to note a change in the way the Rect Transform displays the Position and Size information when the anchors are not grouped together and no longer define a single point as an anchor.

When all four anchors are grouped together, they define a single anchor point and the Rect Transform displays the positional offset from the pivot as well as the width and height of the UI element.

When the anchors are split apart, the Rect Transform displays the fixed values of the Left, Right, Top, and Bottom. These are the fixed offsets along the x- and y-axis of the anchors to their associated corners.

If any two anchors are grouped together there will be no stretching along that axis and the Rect Transform will continue to display the Position and Width/Height for that axis.

Anchor Presets

(09:52) When setting the pivot and anchors for a UI and element there are a number of common configurations. To make setting these quick and easy, the Rect Transform includes the Anchor Presets window. This can be accessed by clicking on the Anchor Presets button.

The Anchor Presets button displays the current anchoring choice of the Rect Transform. In the Anchor Presets window, the common configurations are arranged in a matrix based on the position of the anchors, with fixed anchor points in the middle and stretch options along the outer edge. The anchor position can be set by clicking on the desired configuration.

Additionally, the pivot and/or the position of the UI element can be set at the same time as the anchors by holding down the Shift and/or Alt keys when clicking on the desired configuration. These optional keys are noted at the top of the Anchor Presets window.

Pivot, Rotation, and Scale

Pivot

(10:58) Below the Anchor section in the Inspector, the Pivot fields define the pivot point of the UI element using a normalised value of 0 to 1 along the x- and y-axis, with (0, 0) in the lower left and (1, 1) in the upper right.

Rotation

(11:10) The Rotation fields define rotation of the UI element. In the most common of cases, rotation will only need to be done along the z-axis, keeping the UI element in 2D splace. Rotation is allowed on all three axes however, and the element can be viewed in 3D space.

Scale

(11:28) Before discussing Scale, it is important to understand the difference between scaling and size.

When adjusting a UI element's size in the scene view or adjusting the Width and Height in the Inspector, the UI element is being resized not scaled. Resizing changes the Rect Transform's width and/or height but does not scale the UI element; this will not affect the font-sizes, the border on sliced images, or other items related to the UI element.

When the UI element is scaled the entire element is scaled, including items like fonts and borders.

For layout purposes, it is generally recommended to resize a UI element rather than scale it. Scaling can be useful for animated affects or other special purposes.

A UI element will become invisible if given a negative size. Negative scaling however is supported and can be used for effects, including flipping the UI element with a scale of -1.

Editing Modes

(12:35) The Rect Transform component includes two optional editing modes, Blueprint mode and Raw Edit mode.

Blueprint mode allows for the editing of Rect Transforms as if they were not rotated or scaled. The UI element cannot be rotated with the Rect Tool when on Blueprint mode.

Normally when editing the Pivot or Anchor values from within the Rect Transform, the Pivot or Anchor will move and the UI element will remain in place, just like editing these items in the Scene view. When in Raw Edit mode however, the pivot or anchor will state in place and the UI element will move relative to that fixed item.

Values Driven by Another UI Component

(13:31) There are times when a Rect Transform will have some or all of its values driven by a parent Rect Transform or other UI component, such as a layout group. In these cases, some or all of the properties of the Rect Transform will be greyed out and uneditable; there will be a note at the top of the Rect Transform indicating that some values are being driven by another component.

For more information on the components driving the Rect Transform, see the Unity documentation or the associated [transcribed] lesson for that component.

(in progress)

#unity3d #unity3d 4.6 #resource #video #transcript

Transcript of UI Canvas - Unity Official Tutorials

Resource: Notes closely following the closed captions of UI Canvas - Unity Official Tutorials for Unity3D 4.6.

Contents

(00:00) Introduction to UI Canvas

(00:41) Render mode: Screen Space - Overlay

Pixel Perfect

(01:50) Render mode: Screen Space - Camera

Render Camera

Plane Distance

(04:01) Render Mode: World Space

Event Camera

Receives Events

Sorting Order and Order in Layer

Introduction to UI Canvas

(00:00) The canvas is a component that controls how a group of UI elements will be rendered. All UI elements must be children of a canvas. It is possible to have more than one canvas in a scene, but to use a UI element there needs to be at least one available canvas. If a new UI element is created and no canvas exists, a new canvas will be created and the new UI element will be attached to that canvas as a child.

Each canvas has a number of different possible render modes. The render mode is set by using the Render Mode popup menu.

Render mode: Screen Space - Overlay

(00:41) Screen Space - Overlay (default) is the most common render mode. With Screen Space - Overlay selected, the canvas overlays the scene and all of its UI elements are be drawn on top of everything else rendered in that scene. In this mode, the canvas fills the screen and will resize automatically if the screen settings change. In Screen Space - Overlay mode, the canvas will drive the Rect Transform component and the entire Rect Transform component is uneditable. The canvas will set all of the values in the Rect Transform to fill the screen automatically. See more on the Rect Transform here.

Pixel Perfect

This render mode has the option of Pixel Perfect. When Pixel Perfect is selected, UI elements will be adjusted to the nearest pixel when they are rendered, which can, in some cases, sharpen the look of the UI element.

Render mode: Screen Space - Camera

(01:50) Screen Space - Camera is similar to Screen Space - Overlay, however it is rendered by a specific camera in the scene. This allows camera-specific settings to be applied to a screen space UI, the most common being the use of a perspective camera to give the UI a feeling of depth. In this mode, the canvas will fill the camera's viewport and will resize automatically if the camera's viewport settings change. The canvas also drives the Rect Transform component in this mode.

Render Camera

This render mode has several options, including Pixel Perfect. The Render Camera option is for setting the camera that will render the UI elements on this canvas. If there are none, the canvas component will use Screen Space - Overlay settings for rendering. When a camera is assigned to the canvas component, the UI elements will be moved into the camera's frustum and resized to fit. This allows for the UI to be rendered relative to game objects in the scene view.

Plane Distance

To control where in the scene the UI elements will be rendered, use the Plane Distance option to move the canvas closer to or further away from the camera. The canvas and its UI elements will be automatically resized to fit the frustum based on their position in front of the camera. The Plane Distance must be within the rendering camera's near and far clipping planes to be rendered.

When using Screen Space - Camera, the canvas can be rendered by any camera in the scene. To isolate a canvas and its contents from any other cameras rendering the scene, use the camera's clear flags, culling mask, and depth properties. See more on camera properties here.

Other options available in render mode Screen Space - Camera are described under the last render mode, World Space.

Render Mode: World Space

(04:01) Render mode World Space renders UI elements in the scene volume. These UI elements could be static objects in the scene or mobile objects, like speech bubbles or player tags that follow game objects in the scene. In World Space mode, the canvas no longer drives the Rect Transform and can be set anywhere in world space. With the understanding that there can be more than one canvas in the scene, it is not uncommon to create new world space canvases as necessary for world space UI elements.

Event Camera

The Event Camera option is required to receive events and determine which camera will be used to detect events like clicking on a UI element. In most cases with World Space select, this event camera will be the camera rendering the scene.

Receives Events

The Receives Events option indicates whether the UI element on this canvas will receive events like clicks and hovers. Disable this property to ignore events on all UI elements that are children of this canvas.

Sorting Order and Order in Layer

Sorting Order and Order in Layer options are for controlling the render order of the canvas when compared to other renderers in the scene. Sorting Order and Order in Layer are exposed on the canvas component and are available for canvases set to either Screen Space - Camera or World Space. See here for more information on Sorting Layers and Order in Layer.

UI elements on a canvas will be rendered in a top-down order where the first items are rendered at the back and lower items are rendered later and appear on top. To change the order in which a UI element renders, change its order in the hierarchy.

#unity3d #unity3d 4.6 #resource #video #transcript

I started following Klei Entertainment when Shiri recommended Mark of the Ninja on Steam. Since then, their game Invisible, Inc., originally titled Incognita, has fulfilled my tactics game needs the way X-COM: Enemy Unknown used to, but with espionage. Their levels use a random map generator and it definitely has gotten more fun since they changed up the procedural generation, described in this interview with Rock, Paper, Shotgun.

#game design #random map generator #rock paper shotgun #klei entertainment #invisible inc #incognita

CSS3 Selectors for Testing: Tips and Tricks

Here is a subset of CSS selectors to take advantage of when testing webpages, organised from beginner to intermediate. Also includes examples of these selectors used in Selenium (Ruby) and Jasmine with jQuery.

For a full list of CSS3 Selectors, refer to the table at W3C.

Contents

#id Selectors

Specificity and Descendants

Double Negatives with :not()

:nth-child() and :nth-of-type()

(Work in Progress)

#id Selectors

Tip: If the desired element has an id, use it. Ids are unique on a given HTML page.

Inspect Element

Browser Tip: Most modern browsers allow elements to be inspected by right-clicking them in the webpage and selecting Inspect Element from the menu. The browser's Developer Tools then open to show the HTML. Google Chrome is recommended as Mozilla Firefox does not seem to show all attributes on elements.

Inspected HTML

Right-click inspecting this blog's header shows the following HTML.

<header id="header"> <section id="blog_info"> <h1><a href="/">Alisa KY Chen: Code</a></h1> </section> </header>

CSS Selector

#blog_info selects the section in the example inspected HTML. #header section#blog_info does too, but it doesn't get more specific than a single id when selecting an element. When the desired element doesn't have an id, aim for minimal specificity.

Selenium (Ruby)

@driver = Selenium::WebDriver.for :firefox # helper function, since @driver.find_element() may throw an error # this may already be included in a gem or .rb helper file def element_present?(how, what) @driver.find_element(how, what) true rescue Selenium::WebDriver::Error::NoSuchElementError false end # test the element is there expect ( @driver.element_present?(:id, "blog_info") ) # get the text within this element @driver.find_element(:id, "blog_info").text()

Giving a function either :id, "blog_info" or :css, "#blog_info" as arguments will return the same element.

Jasmine with jQuery

// test the element is there expect( $("#blog_info").length ).tobe(1) // get the text within this element $("#blog_info").text()

Specificity and Descendants

Aim for selectors that are as specific as needed and no more. Awesome as they are, modern browsers do not generate such succinct selectors.

Inspected HTML

Try it out. Google "CSS3 pseudo selector" and right-click inspect one of the links or anchor elements. Then right-click the element within Developer Tools (specifically the Elements tab in Chrome) and Copy CSS Path. Paste into your editor of choice or into the browser's Console.

Warning: Using the browser to generate the CSS selector is not recommended.

Test Selectors in the Console

Browser Tip: If the webpage is using jQuery or another library that allows selection of elements by their CSS selectors, then it's possible to use it in the browser's Developer Tools Console. For this example, try entering $("#rso") in Chrome's Console. To check whether jQuery is available, enter $ into the browser console to see if it returns anything or is undefined.

CSS Selector

The resulting selector from Google Chrome is #rso > li:nth-child(2) > div > h3 > a. CSS selectors are 'read' right-to-left and > means a direct descendant or child (excluding grandchildren and further nested elements). Thus it reads, "anchor, child of heading level 3, child of division, child of list item, second child of #rso." The selector pattern elementParent > elementChild is usually unnecessary.

Compare that to [data-href='http://www.w3.org/TR/selectors/']. Yep, succinct and meaningful. [attribute='value'] is the pattern for an CSS attribute selector looking for an exact value.

What if the test is looking for the link as a main result? That is, not one of the smaller links or in an advertisement?

Rule: Start with the closest parent that has an id, then include descendants necessary to make a match. This only requires a couple generations of descendant selectors unless there are several nested elements of the same type without distinguishing classes. If that's the case, the developers may want to consider more semantic HTML or CSS.

Following this rule of thumb, the selector would be #rso h3 [data-href='http://www.w3.org/TR/selectors/'], which can be read right-to-left as "element with attribute data-href='http://www.w3.org/TR/selectors/', descendant of heading level 3, descendant of #rso.

Selenium (Ruby)

@driver = Selenium::WebDriver.for :firefox @wait = Selenium::WebDriver::Wait.new(:timeout => 2) wait up to 2 seconds # define helper function element_present? as above # wait until the element is there (or up to 2 seconds) # then click on it @wait.until ( element_present?(:css, "#rso h3 [data-href='http://www.w3.org/TR/selectors/']") ) @driver.find_element(:css, "#rso h3 [data-href='http://www.w3.org/TR/selectors/']").click()

Jasmine with jQuery

// wait until the element is there (or up to 2 seconds) // then click on it waitsFor( function() { return $("#rso h3 [data-href='http://www.w3.org/TR/selectors/']").length > 0 }, "the link to be present", 2000); runs( function() { $("#rso h3 [data-href='http://www.w3.org/TR/selectors/']").click(); } );

Double Negatives with :not()

For field inputs and buttons, CSS3 has the pseudo-selectors :enabled and :disabled, which can be used to determine the state without having to look into the element's properties.

What if it's not an element that normally gets disabled, such as a link styled as a button in jQuery Mobile or links in a navbar in Bootstrap?

There is a pseudo-selector, :not(selector). Since some selectors are only applicable or some classes only appear when something is not available, double negatives such as :not(:empty) let CSS filter elements so tests may determine whether an element is has loaded or can be interacted with.

Inspected HTML (jQuery Mobile 1.4.2)

<a id="submit-order-btn" href="#" class="ui-btn ui-state-disabled">Process Order</a>

CSS Selector (jQuery Mobile 1.4.2)

The selector .class selects elements with that class. In the case of jQuery Mobile, since the class "ui-state-disabled" is on the anchor, #submit-order-btn:not(.ui-state-disabled) does the trick.

Inspected HTML (Bootstrap 3.1.1)

<ul class="nav nav-pills"> <li><a href="#order">Select Textbooks</a></li> <li class="disabled"><a href="#checkout">Continue to Checkout</a></li> <li class="disabled"><a href="#receipt">Print Receipt</a></li> </ul>

CSS Selector (Bootstrap 3.1.1)

In this case, the class to filter on is on a parent element, so the selector :not(disabled) [href='#checkout'] works. This can select another anchor on the webpage though, so if this is not specific enough, look for the closest parent with an id or other unique selector.

For example, if there is more than one link with [href="#checkout"] on the page but only one inside a list styled as nav button, then either .nav :not(.disabled) [href='#checkout'] or the selector li:not(.disabled) [href='#checkout'] works. While the first selector is technically more specific, it gives semantic context with the class "nav" and is easier to understand when reviewing tests.

Selenium (Ruby)

# click on the selected element @driver.find_element(:css, ".nav :not(.disabled) [href='#checkout']").click()

@driver.find_element() will throw an exception if the element is not found or is disabled, failing that test block. Depending on what the block is testing, triggering a click may need to be wrapped in an if ( element_present?(:css, selector) ) conditional or first expect ( @driver.element_present?(:css, selector) ).

Jasmine with jQuery

// click on the selected element $(".nav :not(.disabled) [href='#checkout']").click();

Note that jQuery silently fails if an object is not found. That is, if the selector does not return a match, it does not attempt to trigger a click. Depending on what the block is testing, it may need to be wrapped in an if ( $(selector).length === 1) conditional or first expect( $(selector).length ).toBe(1).

:nth-child() and :nth-of-type

(Work in Progress)

This is a paragraph inside a sample form

Applicants Name: id="applicant1Name" class="name" Name: id="applicant1Name" class="name" Name: id="applicant3Name" class="name" Name: id="applicant4Name" class="name" etc. Total: id="applicantsTotal"

The pseudo-selector :nth-child(n) and its variations :first-child, :last-child, :nth-last-child(n) will select the nth child, regardless of what type of element it is.

it is possible to use "odd" or "even" instead of a number, ex. :nth-of-type(odd).

Tip: If specifying more than one selector on an element, they are logically and'ed together. The order does not matter when specifying selectors of one element. That is, selector .class:nth-of-type(n) and selector :nth-of-type(n).class are the same. They look for elements that are nth of their type within their parent element and have the given class.

#web #css #test

Trending Blogs

Recently Viewed Blogs

alisa ky chen