Logo-Spanish

GR

 

 

 

QA AUTOMATION ENGINEER

 

Como subir multiples fotos a Pinterest y no morir en el intento (con iMacros)

No se ustedes, mi multitud de lectores (jaja), pero yo ando en este asunto de las redes sociales desde su inicio. ¡Y no soy viejo! digamos que las redes sociales, son relativamente nuevas, ¿Qué les gusta? ¿De 7 u 8 años para acá?. En fin, en todo este tiempo hemos visto ir y venir varias redes sociales, MySpace, Badoo, Metroflog, otros flogs, creo que había una en la que calificabas a la gente del 1 al 10 por su foto de perfil, sexy o no, etc.

Una de las características más comunes siempre ha sido la capacidad de subir fotos a la red y de hecho ha sido la base para algunas. En estos días una de ellas es Pinterest.

Pinterest, es una red social en la que puedes compartir fotos, punto, esa es toda la idea. Tiene varias caracteristicas interestantes, puedes compartir desde otros sitios sólo con el link de la foto, sin tenerla que bajar a tu computadora. Puedes navegar por el sitio y "reppinear" fotos, osea, las compartidas por otros usuarios agregarlas a tus "tableros" (que son como folders en los que organizas tus fotos) puedes dar "likes" y algunas otras cosas. O puedes subirlas desde tu propia computadora.

En fin, pues resulta que como algunas redes sociales del pasado, como metroflog, por ejemplo. Pinterest solo permite subir fotos de una en una. Osea si quieres subir más de una foto, tienes que ir, dar click en el botón, elegir la foto, dar clic en el botón enviar, esperar a que suba y volver a iniciar todo el proceso. Pero ¿Qué pasa si en vez de subir 10 fotos, quieres subir 100 o más?. Con esta restricción mejor solo eliges unas cuantas y las subes, o no subes ninguna.

A continuación intentaré explicar como usar iMacros para subir 100 o cualquier número de fotos a Pinterest y no morir en el intento.

Como en todo nuevo proyecto comenzaremos grabando nuestra macro base que servirá de esqueleto y nos ahorrará un poco de letras que teclear.

Grabando la macro base

Pasos para subir un pin

1. Hacer clic en el botón +

step1

2. Después hacer clic en el submenu "Upload a Pin"

3. Clic en botón "Choose File"

4. Elige un archivo

5. Elige tablero, teclea una descripción (opcionalmente seleccionar Twitter), finalmente clic en Pin it

Ahora necesitamos recrear esos pasos, pero grabandolo en nuestro script. Para hacerlo, primero tenemos que hacer lo siguiente:

Grabando

  1. Para comenzar a grabar luego de lanzar nuestro iMacros vamos a nuestra pestaña Rec
  2. Luego nos dirigimos a www.pinterest.com y hacemos click en el botón Record de nuestro iMacros

imacros_record

3. Una vez grabando, realizamos todos los pasos anteriores para subir una sola foto. Al terminar tendremos algo como:

 

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
URL GOTO=http://www.pinterest.com/
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\P1015683.JPG
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 Ahora, si corriéramos este código tal cual, lo unico que haría es de nuevo subir la misma foto que usamos para crear nuestro test una y otra vez. Por lo tanto, necesitamos una manera de crear un proceso continuo que vaya seleccionando una por una todas nuestras fotos. Para eso necesitamos editar un poco y agregar algunos detalles a nuestra macro.

Editando nuestra macro

Primero necesitamos darle a nuestra macro la lista de fotos que queremos subir. Para hacer esto necesitamos especificarle un archivo donde tengamos tal lista. Vamos a crear, por lo tanto un archivo CSV, que tendrá una lista con los nombres de nuestras fotos.

 Mi archivo CSV se ve algo así:

P1015683.JPG
P1015684.JPG
P1015686.JPG
P1015688.JPG
P1015689.JPG
P1015690.JPG
P1015691.JPG
P1015692.JPG
P1015695.JPG
P1015696.JPG
P1015698.JPG
P1015704.JPG
P1015705.JPG

 Luego de crear nuestro CSV vamos a especificarle en nuestra macro que queremos tal archivo y vamos a crear un "loop" para decirle a nuestra macro que vaya línea por línea tomando de una por una las fotos. Lo haremos de la siguiente manera:

 

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 1
SET !DATASOURCE_LINE {{!LOOP}}
URL GOTO=http://www.pinterest.com/
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\P1015683.JPG
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 Con la primer línea que agregamos le especificamos a nuestro iMacros en qué archivo se encuentra la lista con nuestras fotos (no en donde están nuestras fotos, solo la lista con los nombres de las mismas).

Con la segunda línea le especificamos con que numero de línea de nuestro archivo queremos que comience. Y finalmente con la tercera le especificamos que, con cada nueva vuelta, tome el valor de la variable LOOP, la cual, cambia en cada vuelta, tomando el número de vuelta actual. Por lo tanto si el numer de vuelta actual es 3 el valor de la variable LOOP = 3 y por lo tanto, el valor de DATASOURCE_LINE = 3 también. Con ello iMacros tomará ese valor y utilizará la línea 3 del documento para trabajar.

Ok, ya hemos creado nuestro LOOP, pero aún no hemos terminado. Si corriéramos este macro, tal como está, no obtendríamos el resultado esperado todavía, seguiría subiendo una y otra vez la misma foto, la que usamos como ejemplo para grabar nuestra macro.

Lo que pasa es que no hemos asignado el valor de lo que estamos extrayendo de nuestro documento en ningún lado. Para tal efecto solo vamos a modificar una línea

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 1
SET !DATASOURCE_LINE {{!LOOP}}
URL GOTO=http://www.pinterest.com/
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 Si comparamos con el código más arriba podemos ver que cambiamos CONTENT=C:\Users\Gustavo\Desktop\camara\P1015683.PNG por CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}

La diferencia está en que {{!COL1}} hace que el valor estático P1015683.PNG sea cambiado en cada vuelta por el valor de la columna 1 de nuestro documento y como en nuestro documento sólo tenemos una columna, la cual contiene los nombres de todas las fotos, iMacros ira tomando por cada vuelta cada uno de esos valores.

Hasta ahí nuestro código ya es funcional y debería trabajar sin problemas. Sin embargo, yo recomiendo hacer un pequeño cambio. Lo que podemos hacer es lo siguiente, ya que hemos entrado a www.pinterest.com para grabar nuestra macro y probablemente ya estamos ahí yo removería la línea 6 de nuestra macro.

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 1
SET !DATASOURCE_LINE {{!LOOP}}
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 Ya que URL GOTO lo único que hace es refrescar la página, lo cual es innecesario ya que una vez que se ha subido una foto, la página regresa a su estado original y podemos empezar desde ahí sin tener que refrescar.

Al intentar con nuestro script actual veremos algo como:


Unable to display content. Adobe Flash is required.

"DEBUGGUEANDO"

Como podemos ver ocurrió algo raro, esto sucede porque Pinterest, tarda un poco en ciertos pasos y nuestro script no está preparado para eso, para esos casos podemos usar diferentes soluciones, siendo la más comun el comando WAIT SECONDS=X donde X tiene que ser un número entero de segundos.

Yo comenzaré agregando un WAIT después del paso donde seleccionamos nuestra foto, para darle tiempo a que se suba. Nuestro script quedaría algo como:

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 2
SET !DATASOURCE_LINE {{!LOOP}}
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
WAIT SECONDS=15
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 Ahora solo tenemos que probar de nuevo para ver si ahora nuestro iMacros realiza los pasos deseados.

Luego de probar de nuevo, el mismo problema extraño sigue ocurriendo en mi script. Luego de revisar que pasa, parece ser que el Botón Pin It en el ultimo paso en nuestro script anterior es un poco ambiguo:

TAG POS=25 TYPE=BUTTON ATTR=TXT:Pin<SP>it

 Lo anterior significa, "haz clic" o "encuentra"...  "el vigésimo quinto botón cuyo texto es 'Pin It'". Como podemos ver en Pinterest, todas las fotos ahí tienen un botón cuyo texto es Pin It:

PinterestErro

Por lo tanto si cuando estabamos grabando el botón Pin It de la ventana en la que estabamos era el número 25, eso no quiere decir que en la siguiente será el mismo. Para sitios grandes, como Pinterest, generados dinámicamente, hay que tener cuidado con esto y ser mas específicos a la hora de elegir elementos. Por lo tanto, tomaré un poco de ayuda de Firefox y Firebug para ayudarle a iMacros a encontrar mejor el botón que realmente quiero usar.

Para lo cual haremos lo siguiente:

  1. Vamos a Pinterest a subir una foto, realizamos todos los pasos normales hasta que tenemos el cuadro donde agregamos la descripción, tablero, etc.
  2. Abrimos Firebug
  3. Seleccionamos el botón Pin It en el que queremos dar click

pinterestfix

Lo que haremos es traducir ese HTML a nuestro codigo iMacros

Para iMacros un elemento es identificado usando el comando TAG. El comando TAG posee 4 partes:

  1. POS
  2. TYPE
  3. ATTR
  4. CONTENT

POS. Nos indica la posición numérica de un elemento HTML, osea, si hay n elementos iguales, con esto le especificamos cual de ellos queremos. Ejemplo:

Si de este código:

<UL>
<LI>Unordered information. 
<LI>Ordered information. 
<LI>Definitions. 
</UL>

 Queremos seleccionar la tercera, tendríamos que comenzar con TAG POS=3 porque es el tercer elemento LI

TYPE. Nos indica el tipo de elemento HTML. Para el ejemplo anterior sería TYPE=LI. Generando hasta el momento algo como TAG POS=3 TYPE=LI

ATTR. Se refiere a los atributos del elemento HTML. Por ejemplo, para:

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

 Para la primer línea el codigo en iMacros sería:

TAG POS=1 TYPE=LI ATTR=VALUE:30

Para el segundo sería

TAG POS=2 TYPE=LI ATTR=VALUE:40

Para el tercero sería

TAG POS=3 TYPE=LI

CONTENT. Este parámetro lo utilizamos en elementos HTML que pueden contener algo, como inputs, textareas, etc. y lo usamos para escribir ahí el contenido que le queremos asignar. Por ejemplo, para un input al que le queremos escribir algo, tendríamos algo como:

TAG POS=1 TYPE=INPUT ATTR=CLASS:exampleclass CONTENT:Texto<SP>que<SP>queremos<SP>escribir

 

Volviendo a nuestro script de Pinterest vemos que el código HTML de nuestro botón es:

<button class="rounded Button repinSmall pinIt primary Module ajax btn" type="submit">

 Entonces eso lo traduciremos a:

TAG POS=1 TYPE=BUTTON ATTR=CLASS:rounded<SP>Button<SP>repinSmall<SP>pinIt<SP>primary<SP>Module<SP>ajax<SP>btn&&TYPE:submit&&TXT:Pin<SP>it

 Puesto que nuestro botón ya está detectado como único POS lo cambiamos de 25 a 1 y los atributos class y type de nuestro HTML los agregamos a nuestro parámetro ATTR para hacer la búsqueda lo mas específica posible.

NOTA: <SP> es el codigo en iMacros para espacios.

Por último podemos ver que al finalizar cada foto iMacros muestra una ventanita de confirmación en la cual nos pregunta si queremos ir a ver la foto recién "pinneada" vamos a agregarle otro WAIT al final para darle tiempo a que se cierre. Quedando nuestro código como sigue:

VERSION BUILD=8300326 RECORDER=FX
TAB T=1
SET !DATASOURCE C:\Users\Gustavo\Desktop\fotos.csv
SET !LOOP 4
SET !DATASOURCE_LINE {{!LOOP}}
TAG POS=1 TYPE=BUTTON ATTR=TXT:Add<SP>a<SP>Pin
TAG POS=1 TYPE=BUTTON ATTR=TXT:Upload<SP>a<SP>pin
TAG POS=1 TYPE=INPUT:FILE FORM=NAME:NoFormName ATTR=NAME:file CONTENT=C:\Users\Gustavo\Desktop\camara\{{!COL1}}
WAIT SECONDS=15
TAG POS=2 TYPE=DIV ATTR=TXT:VWs
TAG POS=1 TYPE=LI ATTR=TXT:VWs
TAG POS=1 TYPE=TEXTAREA FORM=NAME:NoFormName ATTR=NAME:description CONTENT=Vag<SP>Fair<SP>2013
TAG POS=1 TYPE=BUTTON ATTR=CLASS:rounded<SP>Button<SP>repinSmall<SP>pinIt<SP>primary<SP>Module<SP>ajax<SP>btn&&TYPE:submit&&TXT:Pin<SP>it
WAIT SECONDS=5

 Corremos de nuevo para ver como funciona.

  Unable to display content. Adobe Flash is required.

Listo! nuestra macro funciona, ahora, solo le decimos que empiece desde nuestra línea uno a la 10,000 (jeje) y tendremos todas nuestras fotos en Pinterest con sólo el click del botón Play.

Para cualquier duda o comentario me las puedes agregar acá abajo en los comentarios.