error with screenshotSelector() on element set to {display: none}

[garris]

When I call screenshotSelector() on element set to {display: none} I get the following error...

(sharp:92706): GLib-GObject-WARNING **: value "0" of type 'gint' is invalid or out of range for property 'width' of type 'gint'

[dotneet]

With latest version of chromy, that problem is already fixed. If an element is {display: none}, screenshotSelector() returns null.

[garris]

I am pretty sure I was on 0.2.13 when I tested. I can verify later.

[garris]

Also, How can I branch in chromy?

I want to check if a selector exists-- if it does then I want to take screenshot and save file. If not, I want to skip that sequence.

[garris]

Sorry accidentally closed. Reopened.

[dotneet]

At present, latest version is 0.3.1. To support iframe, I needed to change a structure of code. So I bumped up a version to 0.3.x.

I'll post an example of branching later.

[garris]

0.3.1 works!

[dotneet]

In any case there is not a way to branch with only chain interface.

Here is example.

      .screenshotSelector('.class-name')
      .result(async item => {
        if ( await chromy.evaluate(_ => document.querySelector('.class-name'))  !== null ) {
          if (item === null) {
            // to do when exists but invisible
          } else {
            // save scrrenshot
          }
        } else {
          // to do when not exists
        }
      })

I feel this code is lengthy. I intend to add two helper methods listed below. (that has same behavior as casperjs)

• visible(selector)
• exists(selector)

[garris]

Yes, those will be very useful.

Possibly more powerful would be if

.if( 
  <evaluateFn>, 
  <trueFn>, 
  <falseFn>
)

Potentially passing the chromy chain object as an argument to all the functions would help imply usage. This could allow for insertion of horizontal stacking based on condition.

Just a suggestion.

[garris]

I am really enjoying working with chromy.

On a side note, Have you worked with the RxJS library? It's is a very expressive syntax. It is really intended for a completely different purpose than Chromy. But the composable aspect could be similar. I wonder if you are familiar the "reactive" programming style. This may be an interesting way to present or demo chromy. Just wondering if you have thoughts?

Here is an interesting example of the rxjs library...

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/partition.md

[dotneet]

Thanks a suggestion! I would like to consider a way to branch more simply and safely.

I haven't use RxJS, but see some articles and slides. That's a very cool library. Exactly, RxJS may be appropriate in some cases of chromy. But I feel RxJS is too smart for most developers using chromy.

If chromy user prefer to use RxJS, they can use fromEvent() operator to handle events emitted from chromy.

here is example. (It's the first time to use RxJs. I really enjoyed!😆)

const Chromy = require('chromy')
const EventEmitter = require('events')
const fs = require('fs')
const Rx = require('rxjs/Rx')

let chromy = new Chromy({visible: true})

const emitter = new EventEmitter()
const stream = Rx.Observable.fromEvent(emitter, 'screenshot')
stream
  .filter((payload) => !payload.err)
  .subscribe((payload) => {
    fs.writeFileSync(`tmp/out_${payload.idx}_${payload.subidx}.png`, payload.image)
  })

chromy.chain()
      .goto('https://garris.github.io/BackstopJS/')
      .screenshotMultipleSelectors(['a'], (err, image, idx, sels, subidx) => {
        emitter.emit('screenshot', {err,image,idx,sel: sels[idx],subidx})
      }, {useQuerySelectorAll: true})
      .end()
      .catch(e => console.log(e))
      .then(_ => chromy.close())

[garris]

I am glad you found this interesting -- I like this example! I think you are right -- it is true that most users will find RxJS too complex. But it is nice to look at innovative projects -- async-chain-proxy just made me think about it.

I will be implementing selectorExpansion soon. I will keep you posted on the progress. Cheers!

[garris]

issue resolved