Scenariusze JavaScript

API Scraping Fish pozwala podać serię instrukcji, które zostaną wykonane po załadowaniu strony. Możesz użyć tej funkcjonalności np. do kliknięcia przycisku na stronie albo wypełnienia formularza.

Kroki są przekazywane w formacie JSON w parametrze js_scenario. Pamiętaj, żeby koniecznie enkodować ten parametr tak jak w przykładzie poniżej. W tym przypadku po tym jak strona się załaduje, przeglądarka odczeka 1 sekundę (1000 ms), nastąpi kliknięcie na element wybrany przez selektor "p > a" i poczekamy aż nawigacja się skończy:

cURL

curl -G \
--data-urlencode 'url=https://example.com' \
--data-urlencode 'js_scenario={"steps": [{"wait": 1000}, {"click_and_wait_for_navigation": "p > a"}]}' \
'https://scraping.narf.ai/api/v1/?api_key=[your API key]'

Python

import requests
import json
from urllib.parse import quote_plus

url = quote_plus("https://example.com")
api_key = "[your API key]"
js_scenario = quote_plus(
    json.dumps({
        "steps":[
            {"wait": 1000},
            {"click_and_wait_for_navigation": "p > a"}
        ]})
)

print(requests.get(f"https://scraping.narf.ai/api/v1/?api_key={api_key}&url={url}&js_scenario={js_scenario}").content)

JavaScript

import axios from "axios";

const url = encodeURIComponent("https://example.com");
const apiKey = "[your API key]";
const jsScenario = encodeURIComponent(
  JSON.Stringify({
    steps: [{ wait: 1000 }, { click_and_wait_for_navigation: "p > a" }],
  })
);

const response = await axios.get(
  `https://scraping.narf.ai/api/v1/?api_key=${apiKey}&url=${url}&js_scenario=${jsScenario}`
);
console.log(response.data);

info

Jeśli akcja powoduje nawigację do innego urla to zostanie naliczona jako drugi request.

Kroki

Kroki są przekazywane jako lista słowników w polu "steps". Każdy słownik ma tylko jeden klucz i stanowi on nazwę akcji a wartość pod nim to argument tej akcji. Przykład:

{
  "steps": [
    {"wait_for": "#button-id"},
    {"select": {"selector": "#select-id", "options": "value1"}}
    {"click": "#button-id"},
  ]
}

Wykonanie tego scenariusza zacznie się od poczekania aż element "#button-id" będzie dostępny, wybrania opcji "value1" z elementu <select> o id #select-id a następnie kliknięcia przycisku, na który czekaliśmy.

Dostępne akcje

Kliknięcie elementu

Klika na element wybrany przez selektor. Przykład:

{
  "steps": [
    {"click": "#a-button"}
  ]
}

Argument musi być stringiem i poprawnym selektorem CSS.

caution

Jeśli kliknięcie na element powoduje nawigację (np. poprzez wysłanie formularza), użyj "click_and_wait_for_navigation", które czeka aż skończy się nawigacja. W przeciwnym przypadku możesz otrzymać w odpowiedzi html przed wykonaniem nawigacji.

Kliknięcie elementu i poczekanie na nawigację

Klika na element wybrany przez selektor i czeka na zakończenie nawigacji. Przykład:

{
  "steps": [
    {"click_and_wait_for_navigation": "#a-button"}
  ]
}

Argument musi być stringiem i poprawnym selektorem CSS.

caution

Jeśli kliknięcie na wbyrany element nie powoduje nawigacji, użyj "click", ponieważ użycie tej akcji spowoduje nieskończone czekanie.

Wypełnianie pól

Wpisuje podane wartości do pól wybranych przez podane selektory. Przykład:

{
  "steps": [{
    "input": {
      "#input1": "value1",
      "#input2": "value2"
    }
  }]
}

Argument musi być słownikiem mapującym selektory inputów na wartości.

note

Jeśli kolejność wypełniania pól ma dla Ciebie znaczenie to podaj każdy input jako oddzielną akcję. Na przykład, jeśli "input2" powinien być wypełniony przed "#input1":

{
  "steps": [{
    "input": {
      "#input2": "value2"
    },
    "input": {
      "#input1": "value1"
    },
  }]
}

Wybór opcji

Wybiera jedną lub wiele opcji z podanego elementu "<select>". Przykład:

{
  "steps": [{
    "select": {
      "selector": "#select1",
      "options": "1"
    },
  }]
}

Argument musi być słownikiem zawierającym pole "selector" specyfikujące selektor do znalezienia żądanego elementu <select> oraz "options" (string albo tablica stringów) wybierający opcje. Wiele opcji można podać w tablicy zamiast pojedynczego stringa:

{
  "steps": [{
    "select": {
      "selector": "#select1",
      "options": ["1", "2"]
    },
  }]
}

Przewijanie ekranu

Przewija ekran w osi pionowej o podaną liczbę pikseli. Przykład:

{
  "steps": [
    {"scroll": 1000}
  ]
}

Argument musi być liczba.

Czekanie określonej liczby czasu.

Czeka stałą ilość czasu, podaną w milisekundach. Przykład:

{
  "steps": [
    {"wait": 1000}
  ]
}

Argument musi być liczba.

Czekanie na element

Czeka aż element podany przez selektor będzie dostępny. Przykład:

{
  "steps": [
    {"wait_for": "#some-button"}
  ]
}

Argument musi być stringiem i poprawnym selektorem CSS.